Overview

In Part 2 of this series I added basic e-mail/password authentication with Firebase.  In this post I will add a router to the application.  I will first create the router, and then a new component that should only be accessible to a user who is authenticated.  This can be accomplished through the use of a router guard.

Adding the Router

As in many of the features that Angular provides, create a new routing module can be done through the Angular CLI.

> ng generate module app-routing --flat --module=app

The –flat flag forces the file generated to be place in the root of the src/app tree, and –module=app tells the CLI to add registration to the App’s top level module imports.  The official Angular tutorial provides excellent documentation on adding routes to the new AppRouting module, and including a routing outlet in a template.  Check out GitHub for the full source up to Part 3.

In the AppRouting module I created the default (empty string) route as the LoginComponent.

Route Guard

Using the Angular CLI, I created a dashboard component and added a simple route to the routes array in the AppRouting module.

Conclusion

In this post I described at a high level the addition of a router, and a route guard to the Angular application.  The full source can be found here. For additional, and most assuredly better, reading go here and here.