Angular 4 routing in lazy loaded feature module


I am using Angular 4.1.3. Our application started small, but have grown enough to require the use of feature modules. So, I started breaking it up in modules. I have the following setup:

- app.module - app-routing.module --- feature-a.module

feature-a.module is loaded in app-routing.module as: ... { path: 'a', loadChildren: '/app/components/a/feature-a.module#FeatureAModule' }, ...

In FeatureAModule, I have the routing set up to handle the pages as normal, but since those pages are now part of the feature module they should be loaded as:

localhost:4200/a/page1 localhost:4200/a/page2

The problem is that originally all the routing was set on the top level so all my internal routing links are pointing to:

localhost:4200/page1 localhost:4200/page2

which hits the top level routing which redirects them to the "**" redirect in app-navigation.module.

I can go through the components included in the FeatureAModule and change the links manually to include the "a/" prefix and that works, but I was wondering if there is a better way of ensuring that all the routes defined in the feature module stay there.

Thanks.

- - Source
comments powered by Disqus