`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 如果下面的结构.

<块引用>

app-routing.module.ts

const 路由:Routes = [{路径:CHILD_MANAGEMENT_PORTAL.baseUrl，canActivate: [AuthGuard],组件:信封组件，loadChildren: () =>import('./features/child-management/child-management.module').then(m＝＞m.儿童管理模块),数据: {menuResolver:ChildManagementMenuResolver，pageTitleResolver:ChildManagementPageTitleResolver，门户数据:CHILD_MANAGEMENT_PORTAL}},];@NgModule({进口:[RouterModule.forRoot(routes)]，出口:[路由器模块]})导出类 AppRoutingModule {}

<块引用>

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

const 路由:Routes = [{路径:'仪表板'，loadChildren: './dashboard/child-dashboard.module#ChildDashboardModule'},{小路: '**'，重定向到:'仪表板'}];@NgModule({进口:[RouterModule.forChild(routes)],出口:[路由器模块]，声明:[]})导出类 SalesArrangementManagementRoutingModule {}

我们只需将子路由模块的 loadChildren 从 loadChildren: './hoge.module#HogeModule' 更改为 loadChildren: () =>import('./hoge.module.ts).then(m => m.HogeModule)'.

<块引用>

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

const 路由:Routes = [{路径:'仪表板'，loadChildren: () =>import('./dashboard/child-dashboard.module').then(m => m.ChildDashboardModule)},{小路: '**'，重定向到:'仪表板'}];@NgModule({进口:[RouterModule.forChild(routes)],出口:[路由器模块]，声明:[]})导出类 SalesArrangementManagementRoutingModule {}

但我不明白为什么.(我没有更改 app-routing.module.ts...)

那你能解释一下区别吗?

解决方案

看来您从 Angular 7.x 升级到 8.x，这就是方案发生变化的地方.

说明(来自 angular 文档)

<块引用>

当 Angular 首次引入惰性路由时，浏览器不支持动态加载额外的 JavaScript.Angular 使用语法 loadChildren: './lazy/lazy.module#LazyModule' 创建了我们自己的方案，并构建了支持它的工具.现在许多浏览器都支持 ECMAScript 动态导入，Angular 正朝着这种新语法发展.

在第 8 版中，loadChildren 路由规范的字符串语法已被弃用，取而代之的是使用 import() 语法的新语法.

之前

const 路由:Routes = [{路径:'懒惰'，//不推荐使用 loadChildren 的以下字符串语法loadChildren: './lazy/lazy.module#LazyModule'}];

之后

const 路由:Routes = [{路径:'懒惰'，//新的 import() 语法loadChildren: () =>import('./lazy/lazy.module').then(m => m.LazyModule)}];

希望能帮到你.

Issue

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

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 {}

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 : 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 {}

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

So could you explain the difference?

解决方案

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

Explanation (From angular docs)

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

Hope this helps you out.

这篇关于`loadChildren: () => 和有什么区别?import('./hoge.module.ts).then(m => m.HogeModule)' 和 loadChildren: './hoge.module#HogeModule'?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！