Angular 2 Routing | How to Set Up Basic Routing in Angular 2,4,5 | Routing example in Angular 2,4,5

In Angular 2,4,5 we nevigates our components through routing. Here in this tutorial I'll explain how to manage routing in Angular 2,4,5 very easily.

Because Angular Js is preferred to develop single page web applications so if you have common navigation then you can manage them through the routing in angular.

We also can manage the authenticated routing in Angular 2,4,5.

Here we will create a file called app.routing.ts inside the app directory of application.


In app.routing.ts, AuthGuard and AdminAuthGuard are the authentication middle wares which allow access to dashboard and managers routes after login only like:

if you have NavComponent as parent component then it will be visible on every page of your application like we have used NavComponent in the below routes.

You also can pass the dynamic parameters in Angular 2,4,5 routing like in below code:

If you wanted to manage 404 page in Angular 2,4,5 the you cab do it like below.

Now in app.module.ts file import this routing file and add routing in imports like:

Now in app.component.html replace the whole code with the following below code:

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *