ngOnInit wird nicht nach router.navigate aufgerufen

Question

Meine Angular App ruft plötzlich nicht ngOnInit() nach router.navigation(), was bedeutet, dass meine Komponenten nicht richtig geladen werden. Ich dachte, dass dies möglicherweise auf einige Änderungen zurückzuführen ist, die ich vorgenommen habe, aber das Zurücksetzen der Änderungen hat das Problem nicht behoben.

Beispiel, bei dem die normale Navigation dazu führt, dass die Komponente nicht korrekt geladen wird; Diese Seite wird durch die folgende Codeliste navigiert: this.router.navigate(['/result', this.params.data._id]);:

Neuladen der Seite, wird die Komponente korrekt geladen:

Hier einige meiner Codebeispiele sind,

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 Nach etwas mehr graben ich glaube, das Problem auf die Frage here verwandt ist jedoch die vorgeschlagene fix dieses Problem nicht behebt.

Answer 1

Das Problem endete als Fehler im eckigen Router, ein Downgrade auf Version 4.1.3 behob das Problem. Hoffentlich hilft das jedem anderen, der versucht, die neueste Version von eckig mit dem Kinvey SDK zu verwenden.

Answer 2

Es scheint, dieses Problem ist immer noch herum, auch nachdem 5.0 freigegeben wurde, zumindest das Problem https://github.com/angular/angular/issues/18254 ist noch nicht gelöst. Die gute Nachricht ist, dass es eine Abhilfe in der Ausgabe beschrieben ist, unter Verwendung von:

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

ich für Firebase das Problem in dem onAuthStateChanged Rückruf hatte und die obige Abhilfe geholfen.