`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 : wrong

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 : correct

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)

这引发了第二个错误。

然后我通过简单地将 "module": "esNext" 添加到 tsconfig.json 文件中的 compilerOptions 并将 "module": "es2015" 更新为 "module"："esNext" 在 tsconfig.app.json 和 tsconfig.tns.json 文件中。

这解决了我的问题

Answer 2

您似乎从 Angular 7.x 升级到了 8.x，这就是方案发生变化的地方。

解释（来自 angular 文档）

When Angular first introduced lazy routes, there wasn't browser support for dynamically loading additional JavaScript. Angular created our own scheme using the syntax loadChildren: './lazy/lazy.module#LazyModule' and built tooling to support it. Now that ECMAScript dynamic import is supported in many browsers, Angular is moving toward this new syntax.

In version 8, the string syntax for the loadChildren route specification was deprecated, in favor of new syntax that uses import() syntax.

Before
const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];
After
const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
   loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

希望对您有所帮助。

`loadChildren: () => import('./hoge.module.ts).then(m => m.HogeModule)' 和 loadChildren: './hoge.module#HogeModule' 有什么区别？

What is difference between `loadChildren: () => import('./hoge.module.ts).then(m => m.HogeModule)' and loadChildren: './hoge.module#HogeModule'?

angular

typescript

angular-routing

angular-module

angular-load-children