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.
I am not sure if this is the best way to handle this, but I ended up adding this to app-routing.module.ts:
{ path: 'page1', redirectTo: '/a/page1' },
{ path: 'page2', redirectTo: '/a/page2' },This way, when the main router saw the page1 or page2 url, it redirected to /a/page1(2). This works, but as I mentioned, I am not if this is the best way to handle this.