NgOnInit is not called after router.navigate

Question

My Angular application does not unexpectedly call ngOnInit() after router.navigation() , which means that my components are not loading correctly. I thought this was possible due to some changes that I made, but returning the changes did not help solve the problem.

An example where normal navigation causes a component to not load correctly; You can go to this page by the following list: this.router.navigate(['/result', this.params.data._id]); :

Page reload, component loaded correctly:

Here are some of my code lists,

app.module.ts

 @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule, AgGridModule.withComponents( [SampleResultButtonComponent] ), ChartsModule ], declarations: [ AppComponent, LoginComponent, LogoutComponent, SignupComponent, FilesComponent, NavbarComponent, ProfileComponent, UploadComponent, SampleGridApplicationComponent, SampleResultButtonComponent, AssetGridApplicationComponent, ResultComponent, ResetPasswordComponent, AssetComponentDetailComponent ], bootstrap: [ AppComponent ], entryComponents: [AssetComponentDetailComponent] }) export class AppModule {} 

application-routing.module.ts

  @Injectable() export class NoAuthGuard implements CanActivate { constructor(private router: Router) {} canActivate() { const activeUser = Kinvey.User.getActiveUser(); if (activeUser) { return true; } // Navigate to the login page this.router.navigate(['/login']); return false; } } @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router) {} canActivate() { const activeUser = Kinvey.User.getActiveUser(); console.log("AuthGuard, CanActivate"); if (!activeUser) { return true; } // Navigate to the main page this.router.navigate(['']); return false; } } const appRoutes: Routes = [ { path: '', component: NavbarComponent, canActivate: [NoAuthGuard], children: [ { path: '', component: SampleGridApplicationComponent }, { path: 'files', component: FilesComponent }, { path: 'upload', component: UploadComponent }, { path: 'profile', component: ProfileComponent }, { path: 'sampleitems', component: SampleGridApplicationComponent }, { path: 'assetitems', component: AssetGridApplicationComponent }, { path: 'result/:id', component: ResultComponent} ] }, { path: 'login', component: LoginComponent, canActivate: [AuthGuard] }, { path: 'logout', component: LogoutComponent }, { path: 'signup', component: SignupComponent, canActivate: [AuthGuard] }, { path: 'reset', component: ResetPasswordComponent, canActivate: [AuthGuard] } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, {useHash: true}) ], exports: [ RouterModule ], providers: [ AuthGuard, NoAuthGuard ] }) export class AppRoutingModule {} 

EDIT After some additional copying, I believe that the problem is related to the problem here , however, the proposed fix does not solve this problem.

Answer 1

The problem ended up being an error in the angular router, downgrading the fixed problem to version 4.1.3. Hope this helps everyone trying to use the latest version of angular with the Kinvey SDK.

Answer 2

It seems this problem is still around, even after 5.0 was released, at least the problem https://github.com/angular/angular/issues/18254 has not yet been resolved. The good news is that in this case a workaround is described using:

  this.zone.run(() => { this.router.navigateByUrl( url ); }); 

I had a problem in the onAuthStateChanged callback for Firebase, and that helped.