I've an Angular (4) app with the following structure:
app.module
bi.module
auth.module
The routing should be:
/ -> redirect to /home
/home -> use HomeComponent
/auth -> redirect to /auth/login
/auth/login -> use LoginComponent
/auth/register -> use RegisterComponent
any other thing -> use PageComponent
The thing is that this routing is splitted into different modules and I'm also using lazy loading so that the bi.module is only loaded when needed (after user is logged in, basically). Now, my auths routes are working and if I type /home this is also working, but the empty / or any other ones are not working.
This is my app.module.ts
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard]
},
{
path: '**',
loadChildren: './bi/bi.module#BiModule'
}
];
...
imports: [
...
AuthModule,
RouterModule.forRoot(routes, { enableTracing: true }),
BiModule
],
My auth.module is working fine, so no need for it. My bi.module
const routes: Routes = [
{
path: '',
component: PageComponent,
canActivate: [AuthGuard],
resolve: {
content: PageResolve
}
}
];
...
imports: [
...
RouterModule.forChild(routes)
],
When I go '/', my wildcard route in biModule is activated and my PageComponent is rendered instead of redirecting to /home.
This is my trace from the router:
Router Event: NavigationStart
NavigationStart(id: 1, url: '/')
NavigationStart {id: 1, url: "/"}
Router Event: RoutesRecognized
RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } )
RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
Router Event: NavigationEnd
NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}
PageComponent
The last trace (PageComponent) is a console.log in my component.
Any idea what I'm doing wrong? Thanks