Angular 2 Router Wildcard handling with child-routes

Question

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...

Answer 1

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]
  ...
  ...
})

Answer 2

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.

The wildcard routing module or 'page not found' routing module:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '**',
                component: NotFoundComponent
            }
        ])
    ],
    declarations: [
        NotFoundComponent
    ],
    exports: [
        RouterModule
    ]
})
export class WildcardRoutingModule { }

The application module :

@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 {
}

Answer 3

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
        },      
    ]
}