ngOnInit not being called after router.navigate

Question

My Angular app is all of a sudden not calling ngOnInit() after router.navigation() which means my components do not load correctly. I thought it may have been due to some changes I made but reverting the changes did not resolve the issue.

Example where normal navigation causes component not to load correctly; This page is navigated to by the following code listing: this.router.navigate(['/result', this.params.data._id]);:

Reloading the page, the component is loaded correctly:

Here are some of my code listings,

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 After some more digging I believe the issue is related to the issue here however the suggested fix does not resolve this issue.

Your screenshots show different components being loaded... The first shows `SampleGridApplicationComponent` and the second shows `ResultComponent`. Is this what you're expecting? — Empereol, Jun 28 '17 at 13:37
This is the issue, `SampleGridApplicationComponent` is the component from the previous route and `ResultComponent` is the component for the current route. The components are not being loaded when using router.navigate. — Mika571, Jun 28 '17 at 22:41

score 14 · Answer 1 · answered Nov 24 '17 at 21:52

14

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

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

I had the problem in the onAuthStateChanged callback for Firebase, and the above workaround helped.

answered Nov 24 '17 at 21:52

Mattias

211
4
4

1

Care to elaborate on the details of the bug? Why is it happening? What is the nature of the issue? Which cases are affected? – DonkeyBanana Jan 08 '18 at 20:10
I also got same problem at version 5+. Thanks! I can found a solution from the [issue link](https://github.com/angular/angular/issues/18254) – BYUNGJU JIN Apr 02 '18 at 13:10
1

I got the same issue after upgrading from angular 5.2.0 to angular 6. Thanks – David May 11 '18 at 12:37
Also saw this problem with `@angular/router@7.2.0`. Running `NgZone` manually as suggested here fixed the problem. As of this writing, I don't understand exactly why this was needed. – Jeff Fohl Sep 18 '19 at 00:40

score 3 · Accepted Answer · answered Oct 26 '17 at 13:15

3

The problem ended up being a bug in angular router, downgrading to version 4.1.3 fixed the issue. Hopefully this helps anyone else that tries using the latest version of angular with the Kinvey SDK.

answered Oct 26 '17 at 13:15

Mika571

332
3
13

1

Care to elaborate on the details of the bug? Why is it happening? What is the nature of the issue? Which cases are affected? – DonkeyBanana Jan 08 '18 at 20:09

ngOnInit not being called after router.navigate

2 Answers2

Linked