# 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



