由于BrowserAnimationsModule登录后登录组件/路由显示在activatedRoute下面

Question

我似乎无法想象这个。我以用户身份登录。我已经缩小了一点，但由于Angular Material，我依赖于BrowserAnimationsModule作为依赖。但是，如果我删除导入它似乎没有这个问题，并正常加载。

这是我的函数调用我将在收到响应时导航到新路径。

login() {
  this.authService.login()
  .then((res) => {
      this.router.navigate(['home'])
    })
  .catch((err) => console.log(err));
}

像这样，但我无法弄清楚是什么导致登录页面仍然出现在我的家庭组件下面。 app.component.html看起来像这样，只是拿着路由器插座。

<router-outlet></router-outlet>

这是我的app.routing.ts文件

import { Routes, RouterModule } from '@angular/router';

import {
  LoginComponent,
  HomeComponent
} from './_components/index';

import { AuthGuard } from './_guards/auth.guard';

let appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    canActivate: [AuthGuard],
    component: HomeComponent
  }
];

export const AppRoutes = RouterModule.forRoot(appRoutes);

platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 1, url: '/home')
platform-browser.js:367 NavigationStart {id: 1, url: "/home"}
core.js:3660 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 1, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 RoutesRecognized {id: 1, url: "/home", urlAfterRedirects: "/home", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 1, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 GuardsCheckStart {id: 1, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'home')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
auth.service.ts:37 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.service.ts:39 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.service.ts:37 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.service.ts:39 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.guard.ts:16 false
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } , shouldActivate: false)
platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: false}
platform-browser.js:380 Router Event: NavigationCancel
platform-browser.js:367 NavigationCancel(id: 1, url: '/home')
platform-browser.js:367 NavigationCancel {id: 1, url: "/home", reason: ""}
platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 2, url: '/login')
platform-browser.js:367 NavigationStart {id: 2, url: "/login"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:367 RoutesRecognized {id: 2, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:367 GuardsCheckStart {id: 2, url: "/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'login')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 2, url: "/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:367 ResolveStart {id: 2, url: "/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 2, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:367 ResolveEnd {id: 2, url: "/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'login')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 2, url: '/login', urlAfterRedirects: '/login')
platform-browser.js:367 NavigationEnd {id: 2, url: "/login", urlAfterRedirects: "/login"}
auth.service.ts:20 Bk {A: Array(0), G: "AIzaSyD-_kTu95MSLLNWEUbNYQZ8SXduvxgCH7g", o: "[DEFAULT]", w: "time-clock-mkteagle.firebaseapp.com", c: Ch, …}
platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 3, url: '/home')
platform-browser.js:367 NavigationStart {id: 3, url: "/home"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 3, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 RoutesRecognized {id: 3, url: "/home", urlAfterRedirects: "/home", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 3, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 GuardsCheckStart {id: 3, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'home')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
auth.service.ts:37 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.service.ts:42 Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}
auth.guard.ts:12 logged in
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 3, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 3, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 3, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 ResolveStart {id: 3, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 3, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
platform-browser.js:367 ResolveEnd {id: 3, url: "/home", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'home')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 3, url: '/home', urlAfterRedirects: '/home')
platform-browser.js:367 NavigationEnd {id: 3, url: "/home", urlAfterRedirects: "/home"}

虽然我自己无法理解这种追踪，或者发现了一些事情。我认为帮助诊断可能会有所帮助。我仍然认为这与Material依赖的@ angular / animations有关，不知何故。

Answer 1

通过明确告诉NgZone运行，我得到了这个。看来Angular在捕获未处理的异常时遇到了问题

login() {
    this.auth.login()
    .then((res) => {
      this.zone.run(() => { this.router.navigate(['/home']); });
      })
    .catch((err) => console.log(err));
}