Angular Routing between modules

In this tutorial, we will learn how to setup routing between multiple feature modules. In the previous tutorial on Angular Modules, we learnt how to create the multiple feature modules in a application. The Modules are core of any Angular apps. Our App will going to contain several such modules each implementing a specific feature.

If you are new to routing, then suggest you to read the following articles

• Routing and Navigation in Angular
• Location Strategies in Angular Router
• Passing Parameters to Route
• Child Routes / Nested Routes
• Passing Optional (Query) Parameters to a route
• Navigation between Routes
• Angular Route Guards

Routing : A recap

Let us briefly how routing is configured in the root module of the application.

Defining the routes

The routes are defined in a constant as shown below

Where path is the URL segment and component is the component to be loaded. This route tells angular to render HomeComponent when the user navigates to the URL “/home”

How to Configure the Angular Routes

Register the Routes

Next, we register the routes with  the RouterModule in our AppModule as shown below

Display the Component

Next, we will use the RouterLink directive to bind the click event to Route

We, then display the component using the router-outlet directive as shown below.

Routing in Feature Module

The Routing in Feature Module or sub module follows the same pattern except for how we register the routes with the RouterModule

In the Root module we will use the forRoot (RouterModule.forRoot(routes)) method , while in feature modules we will use the forChild method (RouterModule.forChild(routes))

forRoot vs forChild

The RouterModule contans several components. it also includes the several Services.

The services provided in the Root Module or in any of the eagerly loaded feature modules  are app-scoped. i.e they are available for injection in every component in the app.

This rule does not apply to the lazy loaded modules. The lazy loaded modules gets their own injector and providers. The services provided in the lazy loaded modules are available only in the lazy loaded module only.

Now, consider the case where RouterModule is imported in a lazy loaded module. This will create the separate instance of the Router service in the lazy loaded module. This will have untended bugs as there should only a single instance of the Router service in the app.  

We need to register the services only in the AppModule and not in the Lazy loaded module. The forRoot method imports RouterModule and registers all its services. Hence it is used in the root module. The forChild method imports RouterModule but does not registers its services. Hence it should be all other modules.

Example App

Create an Angular App using Angular CLI command.

   Run the app to verify everything is ok

Creating the Feature Module

Lets create a feature module named AdminModule. First, Create a folder called admin under app folder.

user.component.ts

rights.component.ts

dashboard.component.ts

Routing Module

The next step is to create the routing module for the above components. 

The routes are defined as 

and RouterModule is imported with the RouterModule.forChild(routes), which registers the routes with the router but does not create the router service 

Root Module

admin.module.ts

app.module.ts

Finally, we need to import the AdminModule in the AppModule 

app-routing.module.ts

The AppRoutingModule contains the routing information for the AppModule, which in the example is empty. The Routs are registered with the forRoot method, which registers the routes and also registers the routing related services.

Finally, the AppRoutingModule is imported in the AppModule

Add the following CSS styles to app.component.css

Child Routes

In the above example , the URL looks like  /user, /dashboard & /rights. You can change the URL to admin/dashboard, admin/user, admin/rights by using the following routes

In the above example both /admin  & /admin/dashboard points to the DashboardComponent

You need to make appropriate changes in the app.component.html

Menu in  Feature Module

Change the routes to 

Add the Menu in DashboardComponent

And remove it from app.component.html

Wild card route

The (**) wild card route is matches by every URL and must be placed last.. This is used to display the Page not found error message, when the URL does not match any routes.

Open the AppModule and add a new component not-found.component.ts

Add the AppRoutingModule to include the NotFoundComponent

And AppModule, move the AppRoutingModule to last in the imports. This will ensure that the wild card route is always at the last place.

It may happen that you may have other routes defined in the AppRoutingModule and might not be able to import it last. In that case create another routing module and place only the wild card route in it and import it in the AppModule.

Summary

In this module, we learnt how to define routes in feature modules. We also looked at how to add child routes and wild card routes.