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);

I have the same exact problem, did you figured out how to solve it ? thx. — A.Chakroun, Sep 25 '17 at 13:38
Do you have a normal setup of Angular? Or is it a hybrid application? — Ben, Sep 27 '17 at 11:31

score 5 · Answer 1 · edited Jul 15 '18 at 03:16

5

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

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

edited Jul 15 '18 at 03:16

georgeawg

48,608
13
72
95

answered Jan 03 '18 at 10:12

Hoang Nguyen Ba

531
1
5
7

score 0 · Answer 2 · answered Aug 09 '17 at 16:20

i had the same problem as you and found a (temporary) work around. First i thought it was a routing problem with the lazy loading on a module, i changed to working on the components but the problem never disappeared.

Finally i implemented OnDestroy (from core) in my component. When the ngOnDestroy function is called i wrote a little javascript that removes the resting element from the DOM.

var parent = document.getElementsByTagName("parent-name");
var child = document.getElementsByTagName("ng-component");
parent[0].removeChild(child[0]);

I know this is just a temporay work around but maybe good enough till you get a final answer from someone one this.

Hope

Thanks for your advice. Do you have any special configuration to your project or was it a clean angular cli one? — Ben, Aug 10 '17 at 19:23

score 0 · Answer 3 · answered Aug 09 '17 at 19:42

0

Have you tried adding a slash to the beginning so that it exactly matches your routerlink?

this._router.navigate(['/public/test'])

Here is more info on relative vs absolute paths in routes: https://angular.io/guide/router#relative-navigation

answered Aug 09 '17 at 19:42

DeborahK

57,520
12
104
129

Unfortunately it still doesn't work. I tried as well `navigateToUrl` and `relativeTo`which didn't work either. – Ben Aug 10 '17 at 19:22
Can you build a plunker that demonstrates the problem? – DeborahK Aug 10 '17 at 19:23
I only get this issue when using a hybrid app (ng1 + ng2 app). I'm not really sure of how to upload such an app to plunker. Also, on an ng2 app only, it works as expected. Any ideas? – Ben Aug 19 '17 at 09:58

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

3 Answers3

Linked