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.

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

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

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

PreviousCreating A Routing Module NextRouter Outlet Setup

Last updated 6 years ago

hashtagAn Example Router

hashtagStackblitz Demo

An Example Router

Stackblitz Demo