How to add routing to an AngularCLI project

As of 3rd April 2017, here is a simple example of how to add routing an AngularCLI project.

All the source code and changes to the AngularCLI project can be found here:

https://github.com/stevenh77/angular-lob-app/commit/30a6a60c0f5b195d5edb290e8f3df902ec605ccf

Step 1:  Create two new files in your app folder for basic components which will display the views we would like to route between.  I’ve called mine Home and Away.

Step 2: Edit the app.component.html in your app folder to contain the router-outlet.

Step 3: Create an ‘app.routes.ts’ file in your app folder.  This example defaults to displaying the HomeComponent and displays the AwayComponent for path “away”.

Step 4: Update the ‘app.module.ts’ file. This is the most complicated step.  I’ve shown the before and after files in the screenshot below (click image to enlarge):

Why all the changes to app.module.ts and what do they do?

Lines 5, 29, and 30:  In order for us to log the routes to the console on start up which is good for debugging, you need to import the Router module (line 5).  This gives us the ability to inject the router object into the constructor (line 29).  Line 30 logs the router to the console on app start up.

Lines 8, 9, 15 and 16:  Lets our app know about our new Home and Away components.

Lines 10, 22 and 24: Lets our app know about our new router and it’s configuration.

Here is our app running.  Note I also have Augury installed which is an Angular debugging tool which can help debug your Angular app including your Router.