Question

在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

动态导入应返回一个带有路径的函数，并随模块返回一个promise，它应该像这样：

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

Answer 2

在应用级进行路由时，

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'
 }
];

reference

前两个路径分别是到CustomersModule和OrdersModule的路由。请注意，延迟加载语法使用loadChildren，然后是使用浏览器的内置import（'...'）语法进行动态导入的函数。导入路径是模块的相对路径。

或

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

请参阅此link

无法通过Navigation（）加载子模块

2 个答案: