Adding Routes

An Example Router

Your components and routes will be different for each app, but everything else in the router module will be the same.

Router Boilerplate

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]
})

export class AppRoutingModule { }

Import Components

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//Components 
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

// Routes for components that will serve as pages
const routes: Routes = [ ];

@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]
})

export class AppRoutingModule { }

Lines 5 - 7: Imported AboutComponent, HomeComponent, ServicesComponent. Remember the filepath is relative to the file it is written in.

Define Routes

//Components
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

// Routes for components that will serve as pagesconst routes: 

Routes = [     
    { path: 'about', component: AboutComponent },    
    { path: 'home', component: HomeComponent},    
    { path: 'services', component: ServicesComponent }, 
];

@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]
})

Lines 8 - 10: Each route is its own object, the object must have path and component properties. The value of path will be the name of the route and the value for component is what component is mapped to that route.

Creating a Route Formula { path: <desired path> , component: < desired component >}

Stackblitz Demo

Angular Routing Module - StackBlitzStackBlitz

Angular Routing

Route Order

One of the key things to know about routing configuration is that the order matters a lot. When the router receives an URL, it will start going through the routes array in order: starting with the first index of the configuration array. If it finds a match to the complete URL, it stops and instantiates