> 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/adding-routes.md).

# Adding Routes

#### An Example Router

{% hint style="info" %}
Your components and routes will be different for each app, but everything else in the router module will be the same.
{% endhint %}

{% tabs %}
{% tab title="Router Boilerplate" %}

```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 { }



```

{% endtab %}

{% tab title="Import Components" %}

```typescript
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.
{% endtab %}

{% tab title="Define Routes" %}

```typescript
//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 >}
{% endtab %}
{% endtabs %}

#### Stackblitz Demo

{% embed url="<https://stackblitz.com/edit/angular-routing-module?embed=1&file=src/app/app-routing.module.ts>" %}
Angular Routing
{% endembed %}

**Route Order**&#x20;

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