Using Angular 2’s Brand New Router

So, there’s all this great info on the internet about many versions of many routers, but which one is the right one? This one! :)

I was super lucky to have Pascal Precht teach me how to use the new router one late late night. Thanks, Pascal!

Also, I thought it was pretty cool to make this app. So I deployed it to Firebase here. Go on. Check it out.

Setting up your app

I set up an Angular 2 app with Angular CLI using MaterializeCSS. Here’s the repo. Don’t forget to ‘npm install materialize-css’ if you clone it.

Here’s my skeleton app. It’s quite literally the most interesting thing I could come up with on the fly.

Making sure you have correct version of the router

Make sure you have the right version! Your dependency in your package.json should be below. Kill and restart your server after you update the file.

“@angular/router”: "3.0.0-beta.2"

Getting the router set up

First things first, create a separate file in which the router will live. ‘app.routes.ts’ file seems best.

One thing I like about this part of the router is that it reminds me of ember’s router.js file so I feel super at home in Angular 2’s new routing standard.

What are you routing?

Looking at these buttons again, I have 4 routes I need set up for the 4 buttons I’ve created, each corresponding to a separate component. You can choose whatever you’re routing. It’s probably not as amazing as what I’m routing, but it’s okay.

Creating your app.routes.ts file

Here’s what my router file looks like (and here’s the gist).

Import all the component that you are going to route. Then create paths for all of them.

import { DefaultRouteViewComponent } from ‘./default-route-view’;
import { RedSacconeComponent } from ‘./red-saccone’;
import { YellowJeffyComponent } from ‘./yellow-jeffy’;
import { GreenBroccoliComponent } from ‘./green-broccoli’;
import { BlueBenleshComponent } from ‘./blue-benlesh’;

export const AppRoutes = [
 { path: ‘’, component: DefaultRouteViewComponent },
 { path: ‘red-saccone’, component: RedSacconeComponent },
 { path: ‘yellow-jeffy’, component: YellowJeffyComponent },
 { path: ‘green-broccoli’, component: GreenBroccoliComponent },
 { path: ‘blue-benlesh’, component: BlueBenleshComponent },
];

Default router view

So, to note the highlighted route below, if it’s an empty string, that tells the router that this is the default view.

Configuring your app.component.ts file

Now, since I want the routes to show up in my main app component, I’m going to import the router and add a directive.

import { ROUTER_DIRECTIVES } from ‘@angular/router’;

directives: [ ROUTER_DIRECTIVES ]

Configuring your main.ts file

This is what actually stumped me the first time. I didn’t configure my main.ts file!

Add these three lines (obviously change what is my AppRoutes to whatever you called your export).

import { provideRouter } from ‘@angular/router’;
import { AppRoutes } from ‘./app/app.routes’;

bootstrap(AppComponent, [provideRouter(AppRoutes)
]);

Getting your router output

Now that you’ve fully wired everything up, it’s time to get your router to actually output something. Below is what you need, and you can wrap it into an a tag if you want.

routerLink=”/red-saccone”

But, since I have buttons I want to click on to make the router work, here’s how I incorporated routerLink into my html file.

<div class=”row”>
 <div class=”col s12 m4 l3 margin-top-10">
 <a class=”waves-effect waves-light btn red” routerLink=”/red-saccone”>Red Saccone</a>
 </div>
 <div class=”col s12 m4 l3 margin-top-10">
 <a class=”waves-effect waves-light btn yellow” routerLink=”/yellow-jeffy”>Yellow Jeffy</a>
 </div>
 <div class=”col s12 m4 l3 margin-top-10">
 <a class=”waves-effect waves-light btn green” routerLink=”/green-broccoli”>Green Broccoli</a>
 </div>
 <div class=”col s12 m4 l3 margin-top-10">
 <a class=”waves-effect waves-light btn blue” routerLink=”/blue-benlesh”>Blue Ben Lesh</a>
 </div>
 </div>

Highlighted is the actual important stuff

Then, just stick your router outlet anywhere you want to output.

<router-outlet></router-outlet>

So, that should work! :) But if you need to stare at the code and play with an app, then checkout my demo repo here.

PS Pascal Precht of thoughtram has a great article about the new router here and was kind enough to pair with me through setting it up for the first time! Best community ever. :)