Multiple nested modules and routing in Angular

Question

I have a project structure similar to something like this:

app.module
–– dashboard.module
–– overview.module
–––– profile.module
–––––– favorites.module

What you see are four levels of feature modules. (Consider them to have also multiple components etc.)

---

What would be the best way of setting up routing for these modules?

I would set up a routing module for every module, like this: app-routing.module, dashboard-routing.module, overview-routing.module (...)

But is that considered as a good practice in Angular? If not, what should one do instead?

Answer 1

Each module should have their own routing file so the concerns remain separate. Its a good practice and i think you should go with this approach.

For Example, an Authentication module should handle its own routing like: /login, /signup, /forgot-password etc.

Answer 2

In my opinion, you should not create multiple modules for a single type of interface. In your case there is a single application and a single module app.module is enough for it.

Now the question is that the alternate approach for another modules ?

So you should create Components for Dashboard, Overview, Profile, Favourites and manage routes in single app-routing.module file.

One more thing which should keep in mind, if you have multiple user interface like admin , sub-admin , user , etc. then it would be easy to maintain modules for each interface, and can manage their routing separately.