Angular Mysterious Routing
I was working on an Angular app and one fine day I imported a module into another module. After doing so I noticed that the routing on my importee ( or whatever tf it's called ) is not working and it is replaced by the routing , of the imported module. After wasting a few good minutes I found out that the reason for this mysterious behavior is the ORDER in which you import these modules. If you import the imported module before the routing module of your importee module , then the visitor's routing will take over yours. Following screen shots explains this with sample modules. The file shown here is the innocent.module.ts which is my importee. ImportedModule is the imported module. OK This order is OK as the InnocentRoutingModule is imported before ImportedModule . All good! NOT OK This order is NOT OK as the InnocentRoutingModule is imported after ImportedModule . Imported module routing will therefor take over , bad Angular bad ! So that's it guys ! Be mind