loadChildren：（）=> import（'./ hoge.module.ts）.then（m => m.HogeModule）'和loadChildren：'./hoge.module#HogeModule有什么区别？ '？

Question

问题

如果采用以下结构，则会收到错误cannot find module。

app-routing.module.ts

const routes: Routes = [
  {
    path: CHILD_MANAGEMENT_PORTAL.baseUrl,
    canActivate: [AuthGuard],
    component: EnvelopeComponent,
    loadChildren: () =>
      import('./features/child-management/child-management.module').then(
        m => m.ChildManagementModule
      ),
    data: {
      menuResolver: ChildManagementMenuResolver,
      pageTitleResolver: ChildManagementPageTitleResolver,
      portalData: CHILD_MANAGEMENT_PORTAL
    }
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

child-management-routing.module.ts：错误

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboard/child-dashboard.module#ChildDashboardModule'
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SalesArrangementManagementRoutingModule {}

我们可以通过仅将子routing.module的loadChildren从loadChildren: './hoge.module#HogeModule'更改为loadChildren: () => import('./hoge.module.ts).then(m => m.HogeModule)'来解决此错误。

child-management-routing.module.ts：正确

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/child-dashboard.module').then(m => m.ChildDashboardModule)
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SalesArrangementManagementRoutingModule {}

但是我不明白为什么。 （我没有更改app-routing.module.ts ...）

那么您能解释一下区别吗？

Answer 1

此功能是以前版本的更新，因此如果需要在您的应用程序中使用，请稍做更改这是一个例子看看

错误ts1323：仅当'--module'标志为'commonjs'或'esnext]时才支持动态导入>

当我尝试使用静态延迟加载导入时出现第一个错误

loadChildren: './lazy/lazy.module#LazyModule
我决定使用动态导入

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
这引发了第二个错误。

然后我通过简单地在tsconfig.json文件中的editorOptions中添加“ module”：“ esNext”并在tsconfig.app.json和tsconfig中将“ module”：“ es2015”更新为“ module”：“ esNext”来解决此问题。 tns.json文件。

解决了m的问题