Use the same route path for different Modules or Components in Angular
Tags: angular
Published: 2020-04-01 23:59:36

One day I asked my self if I could use the same route path for different modules or components.

Why would I need this feature?

In my experience, I found this feature very useful in the following scenarios.

1. You want to use the same path for all users but depending on the user type/privileges which component/module should you load.

2. You have different versions of your web app and according to the server configuration, environment configuration and/or http responses, you can decide which version of the module/component to load.

Probably there are more reasons to use this feature, but these two are the reasons that came to my mind right now.

Let’s set an imaginary scenario to show better this feature.

We have a library web app where the customers could see the books available to use:

![Library Consumer](https://i.imgur.com/8vtJ2rt.png)
<figcaption>Library Consumer</figcaption>

On the other hand, we have the library manager, who can list and add the books available.

![Library Manager](https://i.imgur.com/0OuOWdA.png)
<figcaption>Library Manager</figcaption>

Both types of users use the same url:
**http://localhost:4200/books**

**According to the user type (consumer or manager), we should decide what is the module that we need to load.**

Like we have just said we have two modules:
- Manager module
- Consumer module

And we are going to add a third module: Book Handler Module.

![The three modules](https://i.imgur.com/haAhMtc.png)
<figcaption>The three modules</figcaption>

This last one (Book Handler Module) is going to be responsible to determine which module should we load. **How is going to do that?** We are going to provide the ROUTES of the RouterModule using the [useFactory provider of Angular](https://angular.io/api/core/FactorySansProvider#useFactory).

![BookHandlerModule](https://i.imgur.com/t4KQbhN.png)
<figcaption>BookHandlerModule</figcaption>

As you can see, the method “configBookHandlerRoutes” is going to determine what module we should load asking the AuthService if the user is authorized.

The AuthService is just a service from where we get the role of the user (consumer or manager).

![AuthService](https://i.imgur.com/7AaQflr.png)
<figcaption>AuthService</figcaption>

Let’s see the application running:

![Library Consumer](https://i.imgur.com/Qxk0K9M.gif)
<figcaption>Library Consumer</figcaption>

![Library Manager](https://i.imgur.com/Q8SXP14.gif)
<figcaption>Library Manager</figcaption>

**Yes!!! It’s works!!!!**

![Wait!!!](https://media.giphy.com/media/11FRmJRii0I8iA/giphy.gif)

We have a bug… In the login page if we change the answer value of “Are you the library manager?” after we had already navigated to the “/books” page, the application will only load the book page that had loaded the first time:

![Bug](https://i.imgur.com/mwmG6xw.gif)
<figcaption>Bug</figcaption>

![Why?](https://media.giphy.com/media/s239QJIh56sRW/giphy.gif)

The method “configBookHandlerRoutes” used by the useFactory provider in the BookHandlerModule is only executed the first time we navigate to the “/books” path and after that, the Angular Router already knows which module needs to load:

![BookHandlerModule](https://i.imgur.com/t4KQbhN.png)
<figcaption>BookHandlerModule</figcaption>

### How can we fix this bug?

If the value of “authorized$” (property loaded in the login page) changes, we have to delete the “/books” path in the Router and add it again. Because of that when we navigate again to the “/books” path, the method “configBookHandlerRoutes” used by the useFactory provider will be executed again:

![AuthService](https://i.imgur.com/BqW5CW7.png)
<figcaption>AuthService</figcaption>

### Let’s see the application running after this change:

![Works!!!](https://i.imgur.com/Zos1mVn.gif)

## That’s all!!!

I hope this article would be helpful for you.

If you have any doubt please comment this article and as soon as I can I will answer you.

Here you have the code in [github](https://github.com/gquinteros93/same-path-for-different-modules):

https://github.com/gquinteros93/same-path-for-different-modules

![](https://media.giphy.com/media/g9582DNuQppxC/giphy.gif)