新 loadChildren 导入语法中的 Angular 8 延迟加载模块未被延迟加载

Question

这个问题在这里已经有了答案:





Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'

(9 个回答)


2年前关闭。




我最近将一个项目升级到 Angular 8，我尝试将 loadChildren 导入切换到新语法

例如来自:

loadChildren: './maintenance/maintenance.module#MaintenanceModule',

到:

loadChildren:() => import('./maintenance/maintenance.module').then(m => m.MaintenanceModule),

应用程序路由是这样创建的:

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      scrollPositionRestoration: 'enabled',
      enableTracing: false,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule { }

然而，在构建项目时，似乎没有模块被延迟加载。使用 Webpack 包分析器，我可以看到所有路由模块都包含在主包中，并且导航到这些路由时也没有发生网络事件。

有人知道我在这里缺少什么吗？

Answer 1

终于解决了这个问题，我需要升级根级别 tsconfig.json 中的目标/模块配置。

我变了:

"target": "es5",
"module": "commonjs",

到:

"target": "es2015",
"module": "esnext",

延迟加载现在有效💤