---
description: Angular Routing Module
---

# Creating A Routing Module

## Router Module Boilerplate Explained

{% hint style="danger" %}
You do not have to memorize this code, just where to find it and why we use it.&#x20;
{% endhint %}

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

{% tabs %}
{% tab title="Step One" %}
{% code title="app-routing.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

```
{% endcode %}

**Line 1 & 2:** We need to import the NgModule, Routes and RouterModule classes from angular.&#x20;
{% endtab %}

{% tab title="Step Two" %}
{% code title="app-routing.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
```
{% endcode %}

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

{% tab title="Step Three" %}
{% code title="app-routing.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

**Line 6:** Now we are creating a angular Module and giving it the routes we we define later.
{% endtab %}

{% tab title="Step Four" %}
{% code title="app-routing.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

**Line 10** lastly we export the class so we can import it into our app.module.ts
{% endtab %}

{% tab title="Step Five" %}
{% code title="app.module.ts" %}
```typescript
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 { }

```
{% endcode %}

**Line 4:** We import the Routing Module so we can use **AppRoutingModule**\
**Line 14:** Add **AppRoutingModule**, to the imports array.&#x20;
{% endtab %}
{% endtabs %}

{% hint style="success" %}
If your app compiles and serves move on to the next step.
{% endhint %}

### Troubleshooting

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