角8延迟加载语法不工作

Question

我正在尝试将延迟加载到我的角8应用程序中，但是当我使用官方文档中提供的语法时，我的模块就会被急切地加载。

当我使用角8的语法时：

const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

我没有错误，但我没有得到一个新的块，当我建立应用程序，当导航到模块路由，没有出现在网络标签的铬。(虽然我可以很好地导航到模块)

但如果我把它改写成：

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

(这是旧的语法)它工作得很好。

所讨论的模块肯定不是在其他地方导入的，结果的差异仅来自于更改语法。

我想知道那里是否有我遗漏的东西。我在想，也许是我的角度没有正确地设置为版本8(或其他一些包)，所以我有一个ng version

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.4
@angular-devkit/build-angular     0.800.4
@angular-devkit/build-optimizer   0.800.4
@angular-devkit/build-webpack     0.800.4
@angular-devkit/core              8.0.4
@angular-devkit/schematics        8.0.4
@angular/cdk                      8.0.0
@angular/cli                      8.0.4
@angular/material                 8.0.0
@ngtools/webpack                  8.0.4
@schematics/angular               8.0.4
@schematics/update                0.800.4
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

我确实尝试过创建一个新的示例项目，并设法让它在那里工作，但据我所见，这两个项目都有相同的版本。

你知道是什么原因导致新语法不起作用吗？

Answer 1

在尝试提供一个最低限度的可重复示例、尝试更新所有软件包或重新安装包，以及简单地挖掘所有文件并试图找出问题所在之间，我进行了大量的挖掘，之后我设法解决了这个问题。

实际上，我将我的应用程序升级到了角8，就好像我使用了角7(甚至我已经使用了角8)一样，使用了ng update @angular/cli --from 7 --to 8 --migrate-only ng update @angular/core --from 7 --to 8 --migrate-only命令，如这条线中提到的那样。

这自动更新了延迟加载的所有旧语法，在构建/服务时，我最终可以看到每个模块的所有块。

考虑到这些命令已经修复了，我相信问题是包/依赖的某个地方。

Answer 2

当我遇到类似的问题时，我遇到了这样的问题

module.ts is missing from the typescript compilation. please make sure it is in your tsconfig via the 'files' or 'include' property

和

error ts1323: dynamic import is only supported when '--module' flag is 'commonjs' or '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.json文件中将"module": "es2015"更新为"module": "esNext"。

这解决了我的问题。

Answer 3

尽管答案已被接受，但我甚至面临着一个类似的问题，这是因为没有向加载了been的模块添加路由模块。任何被延迟加载的模块都必须有自己的路由模块，否则应用程序就会重定向到默认路由。我知道这是非常基本的，但有时我们往往忽视这一事实。