angular routing with multiple modules and dynamic routes

Viewed 4488

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

1 Answers
Related