ngOnInit n'est pas appelé après router.navigate

Question

Mon application Angular ne fait tout d'un coup pas appel au ngOnInit() après router.navigation() ce qui signifie que mes composants ne se chargent pas correctement. Je pensais que c'était peut-être dû à quelques changements que j'ai faits, mais revenir aux changements n'a pas résolu le problème. Exemple: lorsque la navigation normale entraîne le chargement incorrect du composant; Cette page est navigua par la liste de code suivant: this.router.navigate(['/result', this.params.data._id]);:

Rechargement la page, le composant est correctement chargé:

Voici quelques-unes de mes listes de codes,

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 {} 

app-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 Après un peu plus creuser, je crois que le problème est lié à la question here mais le correctif proposé ne résout pas ce problème.

Answer 1

Le problème a fini par être un bug dans le routeur angulaire, la rétrogradation à la version 4.1.3 a résolu le problème. Espérons que cela aide quelqu'un d'autre qui essaie d'utiliser la dernière version de angulaire avec le SDK Kinvey.

Answer 2

Il semble que ce problème persiste, même après la publication de la version 5.0, au moins le problème https://github.com/angular/angular/issues/18254 n'est pas encore résolu. Les bonnes nouvelles sont qu'il ya une solution de contournement décrite dans la question, en utilisant:

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

J'ai eu le problème dans le rappel onAuthStateChanged pour Firebase, et la solution de contournement ci-dessus a aidé.