1

问题

如果遵循结构，我们会收到错误cannot find module。

应用程序路由.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...）

那你能解释一下区别吗？

4

2 回答 2

5

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

解释（来自角度文档）

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

在版本 8 中，不推荐使用 loadChildren 路由规范的字符串语法，取而代之的是使用 import() 语法的新语法。

前

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

希望这可以帮助你。

于 2020-01-28T06:59:28.747 回答
0

此功能是从以前的版本更新的，因此如果它需要在您的应用程序中工作，请在此处进行轻微更改，请查看示例

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

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

loadChildren: './lazy/lazy.module#LazyModule

我决定使用动态导入

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

这引发了第二个错误。

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

这为我解决了问题

于 2020-01-28T06:54:15.197 回答