Angular Router when navigating programatically, old component stays in the dom

Question

Angular version: 4

After signing in from the LoginComponent (located in public/signin route, I want to navigate to TestComponent in the path public/test. I'm doing so as following: this._router.navigate(['public/test']) Then, it redirects correctly but the problem is that it doesn't remove LoginComponent from the DOM (although ngOnDestroy does get called).

It's worth mentioning that navigating to TestComonent using <a routerLink='/public/test'>Test</a> works as expected.

What am I doing wrong?

app.routing.ts:

const APP_ROUTES:Routes = [
  {path: 'public', loadChildren: './authentication/authentication.module#AuthenticationModule'}
];

export const APP_ROUTING:ModuleWithProviders = RouterModule.forRoot(
APP_ROUTES, {
useHash: false, enableTracing: true, initialNavigation: true});

` authentication.routing.ts (where both of these components belong):

const routes: Routes = [
    {
        path: '',
        children: [
            {path: 'test', component: TestComponent},
            {path: 'signin', component: LoginComponent},
        ]
    }
];

export const routing = RouterModule.forChild(routes);

Answer 1

I have a same problem. I fixed by add this before routing:

this.zone.run(() => {
    // Your router is here
    this._router.navigate(['public/test'])
});