Organize routes using the Routing Modules pattern in Angular

Those 2 new modules both import the common module. however this common module is not imported into the app module. is it a good idea to import this common module into the app module and export it to the other modules?

Well I think that's fine. Normally for the CommonModule this is how it is being done. But as you mention, there's nothing wrong for creating a dedicated module and exporting it from there and then in turn import that module everywhere else.

In fact, normally in an application you have what's often called SharedModule, where you import all of the modules that will be used throughout the application anyway. A typical example is the imports from the Angular Material library (if you're using that). Check out the official Angular docs about the NgModule FAQ for a detailed explanation on this.

You mentioned that, inside app.module.ts --> inside imports: [ ] - the order of the modules we import matters. I was not at all aware about it. Can you throw some light on it, how should we go about ordering them and why is the routing module added at the last. What should be the ideal order? I tried to find that on the documentation, but I didnt find much on it. thanks.

Hey,

yes the ordering is important due to how the router resolves the routes. The reason is that the router tries to find a matching route using a depth-first algorithm. As such you might theoretically get different results, given you have multiple route configs that match the same URL.

But as said, normally this isn't an issue and in general I'd recommend to structure the routes in a way this doesn't happen (just to avoid confusion) :)