Setting up default routes

Let's get started with setting up a simple route for LemonMart:

  1. Configure your home route:
src/app/app-routing.module.ts ...const routes: Routes = [  { path: '', redirectTo: '/home', pathMatch: 'full' },  { path: 'home', component: HomeComponent },]...

We first define a path for 'home' and inform the router to render HomeComponent by setting the component property. Then, we set the default path of the application '' to be redirected to '/home'. By setting the pathMatch property, we always ensure that this very specific instance of the home route will be rendered as the landing experience.

  1. Create a pageNotFound component with an inline template
  2. Configure a wildcard route for PageNotFoundComponent:
src/app/app-routing.module.ts ...

Get Angular 6 for Enterprise-Ready Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.