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: