Creating A Routing Module

Angular Routing Module

Router Module Boilerplate Explained

You do not have to memorize this code, just where to find it and why we use it.

Create an app-routing.module.ts file, within your src/app directory

Step One

app-routing.module.ts

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

Line 1 & 2: We need to import the NgModule, Routes and RouterModule classes from angular.

Step Two

app-routing.module.ts

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

const routes: Routes = [];

Line 4: Now we are creating a variable called routes, that will define all our routes, more on that later.

Step Three

app-routing.module.ts

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

const routes: Routes = [];

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

Line 6: Now we are creating a angular Module and giving it the routes we we define later.

Step Four

app-routing.module.ts

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

const routes: Routes = [];

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

Line 10 lastly we export the class so we can import it into our app.module.ts

Step Five

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Line 4: We import the Routing Module so we can use AppRoutingModule Line 14: Add AppRoutingModule, to the imports array.

If your app compiles and serves move on to the next step.

Troubleshooting

Any errors here will be a typo for file path double check that first.