Question

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

当我使用角度8附带的语法时：

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

我没有错误，但是在构建应用程序时没有得到新的块，并且当导航到模块路由时，chrome的“网络”选项卡中没有任何显示。（尽管我可以很好地导航到该模块）

但是如果我将其重写为：

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

（这是旧语法）效果很好。

所讨论的模块绝对不会导入其他任何地方，结果的差异仅来自语法的更改。

我想知道那里是否缺少什么。我在想，也许是我的Angular未正确设置为版本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

尽管答案已经被接受，但我什至遇到了类似的问题，这是由于未在延迟加载的模块中添加路由模块。延迟加载的任何模块都必须具有自己的路由模块，否则应用程序将重定向到默认路由。我知道这是非常基本的，但是有时候我们倾向于忽略这个事实。

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"文件中将compilerOptions添加到tsconfig.json并在"module": "es2015"和{{1} "module": "esNext"个文件。

那为我解决了问题。

Answer 3

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

我基本上将我的应用程序重新升级到了角度8，就好像我正在使用角度7（甚至我应该已经使用角度8）一样，使用了this thread中提到的命令ng update @angular/cli --from 7 --to 8 --migrate-only ng update @angular/core --from 7 --to 8 --migrate-only 这将所有延迟加载的旧语法自动更新为新的语法，在构建/服务时，我终于可以看到每个模块的所有块了

考虑到这些命令已修复，我认为问题出在某个地方的软件包/依赖项。

Answer 4

对我来说，问题出在tsconfig.json中。将属性"module"更新为"esnext"后，它就可以正常工作。

Answer 5

写作时

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

import('./lazy/lazy.module')目前正在导入模块。它直到使用后才被推迟，它只是在这里以异步方式完成。此外，为了使m => m.LazyModule工作，必须在AT THIS POINT处加载该模块的定义。因此，它不是延迟加载的，因为您正在正确地导入它

这样做的时候

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

您正在使用的只是字符串-无需依赖，无需导入-稍后将加载模块。（根据要求）

因此，基本上，您正在做的是预取该附加模块，以便可以使用它，但是其内容不会阻止应用程序启动。

这两种情况都不同，取决于您要使用哪种情况。

我将对任何用户可访问的每个模块使用预取-因此应用程序将快速启动，并且在您访问这些模块时将立即执行附加代码而不会造成IO延迟。设置了路由防护后，惰性模块非常有用，这意味着获取某些受保护的模块可能不再需要-例如，对于常规用户而言，永远不需要获取管理面板，因此不需要预取。

Angular 8延迟加载语法不起作用

5 个答案: