[Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed. Also another very common scenario is: what should be the behaviour of the application when an unknown url is accessed? We are already know that in the server everything is getting redirected to the index.html file, so how do we handle this on the client?

We are going to answer those questions by learning how to configure the angular 2 router to have both an index or home route, and a fallback route. We are also going to learn an essential concept about routing configuration.

app.routes.ts:

import {RouterModule} from "@angular/router";
import {NotFoundComponent} from "./shared-components/not-found/not-found.component";

const indexRoute = {path: '', loadChildren: 'app/home/home.module'};
const fallbackRoute = {path: '**', component: NotFoundComponent};
const routes = [
  {path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
  {path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros'},
  {path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact'},
  indexRoute,
  fallbackRoute
];

export default RouterModule.forRoot(routes);

Notice here, the order does matter, if put fallbackRoute to the first place, it will error out.

Github