When using child routes with angular2's router "3.0", there is no need to declare them in the parent router config (before, you had to do something like /child...
in the parent component).
I want to configure a global "page not found" handler, which I can do like this:
{ path: '**', component: PageNotFoundComponent }
in my app routing module.
The caveat: If I do this, the router navigates to routes declared in the app routing module before the PageNotFoundComponent
just fine. But it always navigates to the wildcard route when I try to access a child route (declared using RouterModule.forChild
in some child routing module.
Intuitively, the wildcard route should be placed behind all other route configs, because the router resolves in declaration order. But there does not seem to be a way to declare it after the child routes. It also does not seem very elegant to declare a wildcard route in all child router modules.
Am I missing something or is there just no way to define a global 404-page in Angular-2-Router-3 when using child routes?
You can easily have a centralized wildcard route, i.e. for a site-wide 'Page not found' component. It simply has to be extracted into a separate routing module, which gets included after all the other modules containing child routes.
Therefore, the wildcard route is truly in last position and doesn't hide the routes from any following module.
@NgModule({
imports: [
RouterModule.forChild([
{
path: '**',
component: NotFoundComponent
}
])
],
declarations: [
NotFoundComponent
],
exports: [
RouterModule
]
})
export class WildcardRoutingModule { }
@NgModule({
imports: [
BrowserModule,
AppRoutingModule, // Has forRoot routes
HomeModule, // Has forChild routes
LoginModule, // Has forChild routes
ProductModule, // Has forChild routes
DiagnosticsModule, // Has forChild routes
WildcardRoutingModule // Last position
],
declarations: [
AppComponent
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Simple solution is to reorder modules in the 'imports' array in app module file - ensure app/root router is the last item in the array; for example
@NgModule({ imports: [FeatureModule1, FeatureModule2, FeatureModule3, AppRouterModule] ... ... })
I have the following example for you. The /
-route redirects to the /app
-route and shows the StartComponent
inside the <router-outlet>
of your parent AppComponent
. The StartComponent
itself has another <router-outlet>
in its template in which the router loads the child components.
const appRoutes: Routes = [
{
path: '',
redirectTo: 'app',
pathMatch: 'full',
},
{
path: 'app',
component: StartComponent,
children: [
{
path: '',
redirectTo: 'welcome'
},
{
path: 'welcome',
component: WelcomeComponent
},
{
path: 'settings',
component: SettingsComponent
},
]
},
{
path: '**',
component: PageNotFoundComponent
}
];
The last route is the wildcard route with the **
-path. It will be shown if you navigate to a not known URL like /test123
or for the child components /app/test123
.
The pathMatch: 'full'
means that the router is looking for a equal route. It is important for the redirects.
If you also need a PageNotFoundComponent
for your children, you can add a wildcard to them too.
{
path: 'app',
component: StartComponent,
children: [
{
path: '',
redirectTo: 'welcome'
},
{
path: 'welcome',
component: WelcomeComponent
},
{
path: '**',
component: ChildrenPageNotFoundComponent
},
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With