When navigating from within a submodule from a child route to another sibling child route, instead of the router destroying the previous component, it appends the new one on navigation forward and backward.
Why is this happening?
Starting in /#/subscriber/lookup
, moving to /#/subscriber/register
route
<a [routerLink]="['../register']">Subscriber register link</a>
app.routes.ts
/**
* Angular 2 decorators and services
*/
import { Routes } from '@angular/router';
/**
* Other services
*/
import { RouteProtection } from '../services/route-protection.service';
// import { DataResolver } from './app.resolver';
/**
* Imported Components
*/
import { LoginComponent } from '../login/login.component';
import { NotFound404Component } from '../404/notfound404.component';
export const ROUTES: Routes = [{
path: '',
redirectTo: 'subscriber',
pathMatch: 'full',
}, {
path: 'subscriber',
loadChildren: '../+subscriber/subscriber.module#SubscriberModule',
// canActivate: [RouteProtection]
}, {
path: 'detail',
loadChildren: '../+detail/detail.module#DetailModule',
canActivate: [RouteProtection]
}, {
path: 'login',
component: LoginComponent
}, {
path: '**',
component: NotFound404Component
}, {
path: '404',
component: NotFound404Component
}];
// export const routing = RouterModule.forRoot(ROUTES, { useHash: true});
subscriber.routes.ts
/**
* Imported Components
*/
import { SubscriberLookupComponent } from './lookup/subscriber-lookup.component';
import { SubscriberRegisterComponent } from './register/subscriber-register.component';
/*
* Shared Utilities & Other Services
*/
// import { RouteProtection } from '../services/route-protection.service';
// import { DataResolver } from '../services/app.resolver';
export const subscriberRoutes = [{
path: '',
children: [{
path: '',
pathMatch: 'full',
redirectTo: 'lookup'
}, {
path: 'lookup',
component: SubscriberLookupComponent, //canActivate: [RouteProtection],
}, {
path: 'register',
component: SubscriberRegisterComponent, //canActivate: [RouteProtection], // resolve: { 'dataBroughtToComponent': DataResolver }
}]
},];
app.module.ts
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [AppComponent],
declarations: [ // declarations contains: components, directives and pipes
// Components
AppComponent, LoginComponent, NotFound404Component, // Directives
NavSidebarComponent, NavHeaderComponent, NavFooterComponent
// Pipes
],
imports: [ // import other modules
BrowserModule, SharedModule, BrowserAnimationsModule, RouterModule.forRoot(ROUTES, {useHash: true}), NgbModule.forRoot()
/* ApplicationInsightsModule.forRoot({
instrumentationKey: '116b16e7-0307-4d62-b201-db3ea88a32c7'
})*/
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS, APP_PROVIDERS, AUTH_PROVIDERS]
})
subscriber.module.ts
@NgModule({
imports: [
SharedModule,
CommonModule,
RouterModule.forChild(subscriberRoutes)
],
declarations: [ // Components / Directives / Pipes
SubscriberLookupComponent,
SubscriberRegisterComponent
],
// exports: [
// SharedModule,
// SubscriberLookupComponent,
// SubscriberRegisterComponent
// ]
})
This is what happens on navigation:
I was having this same issue. I find out that when my new component was created, it throws an exception then my older component was not being destroyed.
In my case, in the template I have
{{model.field}}
and in the TypeScriptmodel: Model;
, but when the component is created, themodel
wasundefined
. I think if any exception is throwed on the creation of the component, the router can't destroy the older component.I used the Visual Studio Code debugger to find the exception cause.
So I just putted a
*ngIf
to check model:At first I thought this was because I was viewing my angular app through BrowserSync.
It seemed like for some reason, BrowserSync's javascript messes with angular's router. I'm assuming this is a bug. When I view my app directly, the router works as expected.
However, then it happened again in production without browsersync.
The answer from Caio Filipe fixed it for me. It was because my component
A
was throwing an error, so when navigating to ComponentB
, ComponentA
could not be destroyed due to the error. I submitted a ticket with angular.