> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled-1/creating-a-routing-module.md).

# Creating A Routing Module

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