Angular lazy load submodule blank path redirect to appModule

Question

I am working on Angular 6 project. I stuck into the following problem since the last couple of days. Please guide.

My program based on lazy routing and have dynamic routing also. The following code is my app-routing.module.ts:

 const routes: Routes = [
      {
        path: 'login',
        loadChildren: './login/login.module#LoginModule'
      },
     // Here is my submodule 
      {
        path: '',
        loadChildren: './users/users.module#UsersModule'
      },
     // This is actually i want use to home page as blank 
      {
        path: '',
        loadChildren: './home/home.module#HomeModule'
      },
      { path: '**', redirectTo: 'not-found' }
    ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

The following is my inner/submodule:

  const routes: Routes = [
    {
    path: '',
     component: UsersComponent,
    children: [
        // How can redirect to the main route
    { path: '', redirectTo: '', pathMatch: 'full' },
    { path: ':slug', loadChildren: './inner1/inner1.module#Inner1Module' },
    { path: ':slug/:slug2', loadChildren: './inner2/inner2.module#Inner2Module' }
    ]
    }];
    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })

I have two different templates for the main router outlet and inner router outlet. That why I want to redirect path as blank from inner/sub module to main module. Thanks in advance.

Answer 1

Your userModule route rules should look like this. Check how to have lazy-loaded modules structured in below link

export const RouteConfig: Routes = [
    {
        path: '',
        component: UsersComponent,
        canActivate: [AuthGuard],
        children: [
               { path: '', component: UserPage , children: [
               { path: ':slug', component: 'Inner1Component' },
               { path: ':slug/:slug2', component: 'Inner2Component' }]
        ]
    }
];