Nested outlets in master layout outlet in angular 6

I think you're on the right path. First you need to deal with eager routes and then you can switch to lazy modules.

What you need to do:

app.module.ts

@NgModule({  imports: [    BrowserModule,    AccountModule,    LayoutModule,    RouterModule.forRoot([      { path: '**', component: PageNotFoundComponent }    ])  ],  declarations: [    AppComponent,    PageNotFoundComponent  ],  bootstrap: [AppComponent]})export class AppModule { }

layout.module.ts

@NgModule({  imports: [    CommonModule,    RouterModule.forChild([      {        path: '',        component: LayoutOutletComponent,        children: [          {            path: 'dashboard',            loadChildren: () => DashboardModule          },          {            path: 'products',            loadChildren: () => ProductsModule          },          { path: '', redirectTo: '/dashboard', pathMatch: 'full' }        ]      }    ])  ],  declarations: [    LayoutOutletComponent  ]})export class LayoutModule { }

The main thing you need to know is that all angular routes are merged in one route configuration. To understand this I'd suggest you watching a great video by @deborahk

You can't just write

{ path: '', component: LayoutOutletComponent},

and import other modules(ProductsModule, DashboardModule) separately. The nested routes should be provided as child routes.

Now, when you have all routes configured you can easily switch to lazy loaded modules:

{  path: '',    component: LayoutOutletComponent,    children: [      {        path: 'dashboard',        loadChildren: 'pathToModule#DashboardModule'      },      {        path: 'products',        loadChildren: 'pathToModule#ProductsModule'      },      { path: '', redirectTo: '/dashboard', pathMatch: 'full' }    ]}

And also you can lazy load LayoutModule in AppModule

@NgModule({  imports: [   ...    LayoutModule,    RouterModule.forRoot([      { path: '', loadChildren: './layout/layout.module#LayoutModule' },      { path: '**', component: PageNotFoundComponent }    ])  ],  ...})export class AppModule { }

I've created ng-nested-outlets app on github so try it out.

You can also try it online on Stackblitz Demo

See also

• Angular switch from lazyLoading to 'normal' loading

You shoud do the following things

• in the app module create routes to load modules not the components
• in layout module create routes to load Dashboard, Product and InvoicesModule
• in layout component setup header router-outlet and footer and/or other layout elements
• in modules Dashboard, Product and Invoices setup routes to load component

app.module

    RouterModule.forRoot([      { path: '', loadChildren: '(PathToLayoutMoudle)#LayoutModule' },      { path: '**', component: PageNotFoundComponent }    ]),

layout.module

    RouterModule.forChild([      { path: '', component: LayoutComponent},          children: [          { path: 'dashboard',loadChildren:               PathToDashboardMoudle)#DashboardMoudle'},          { path: 'products',loadChildren:               PathToProductsMoudle)#ProductsMoudle'},          { path: 'invoices',loadChildren:               PathToInvoicesMoudle)#InvoicesdMoudle'},      ]    ]),

account.module

  RouterModule.forChild(  [{    path: '', component: AccountOutletComponent,    children: [      { path: 'login', component: LoginComponent },      { path: 'reset-password', component: ResetPasswordComponent },      { path: 'change-password', component: ChangePasswordComponent },      { path: '', redirectTo: 'login', pathMatch: 'full' }    ]  }]