`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'?

问题描述

问题

在以下结构的情况下，我们会显示错误cannot find module.

We get an error cannot find module in case following structure.

app-routing.module.ts

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:错误

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)'来解决此错误.

We could solve this error by only changing loadChildren of child routing.module from loadChildren: './hoge.module#HogeModule' to loadChildren: () => import('./hoge.module.ts).then(m => m.HogeModule)'.

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

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 ...)

But I could not understand why. (I did not change app-routing.module.ts...)

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

So could you explain the difference?

推荐答案

似乎您是从Angular 7.x升级到8.x的，这就是方案更改的地方.

It seems like you upgraded from Angular 7.x to 8.x and this is where the scheme changed.

说明(来自角度文档)

当Angular首次引入惰性路由时，没有浏览器支持动态加载其他JavaScript. Angular使用语法loadChildren:'./lazy/lazy.module#LazyModule'创建了我们自己的方案，并构建了支持它的工具.现在，许多浏览器都支持ECMAScript动态导入，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.

在版本8中，不建议使用loadChildren路由规范的字符串语法，而推荐使用import()语法的新语法.

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

之前

const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];

之后

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'?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！