Не удалось загрузить дочерний модуль с помощью navigate ()

Question

есть путь "layout", определенный в файле app-routing.module.ts, и я пытаюсь загрузить этот дочерний модуль с помощью метода ниже (определенного в auth.component.ts) ----- this.router.навигация (['/ layout']);

почему я не могу загрузить дочерний модуль?

код

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AuthComponent} from './auth/auth.component';
import {LayoutModule} from './layout/layout.module';
 const appRoutes: Routes = [
{ path: 'auth', children: [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: 'login', component: AuthComponent}
 ]},
{ path: 'layout', loadChildren:() => LayoutModule},
];
  @NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

Когда маршруты на уровне приложения,

const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
},
{
path: 'orders',
 loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
 }
];

ссылка

Первые два пути - это маршруты к CustomersModule и OrdersModule соответственно. Обратите внимание, что синтаксис отложенной загрузки использует loadChildren, а затем функцию, которая использует встроенный в браузер синтаксис импорта ('...') для динамического импорта. Путь импорта - это относительный путь к модулю.

Или

{ path: 'lazymodule', loadChildren: './lazymodule/lazymodule.module#LazyModuleModule' }

см. Ссылку

Answer 2

Динамический импорт должен возвращать функцию с путем и возвращать обещание с модулем, это должно выглядеть так:

{ path: 'layout', loadChildren:() => import{'./layout/layout.module')
.then(m => m.LayoutModule)},