Angular 8 懒加载语法无效

Question

Angular 8 懒加载语法无效

10

我想在我的Angular 8应用程序中实现懒加载，但是当我使用官方文档提供的语法时，我的模块会被急切地加载。

当我使用Angular 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

我尝试创建一个新的示例项目，并且在那里设法让它工作，但从我所看到的来看，两个项目的所有版本都是相同的。

不知道是什么原因导致新的语法无法工作？

- Jojofoulk

你能否在自己的电脑上尝试一个新项目并查看错误是否仍然存在？（如果您已经尝试过，请改为在 StackBlitz 上尝试，并在链接不起作用的情况下向我们提供链接）。您是否尝试停止并重新运行您的服务命令？ - user4676340

我成功地在一个新项目中使其工作了，但我不知道我的实际项目和新示例项目的包之间有什么区别。我尝试重新运行serve命令甚至重建，但似乎没有用。 - Jojofoulk

1

也许你的代码中有import语句，导致了加载问题。 - Antoniossss

没有提供一个最小可复现示例，实在很难帮助你... - user4676340

你的路由模块是什么样子的？检查一下你的导入/导出。 - Andrew Hill

4个回答

4

我在遇到类似问题时发现了这个问题：

module.ts从typescript编译中消失了。请通过“files”或“include”属性确保它在tsconfig中。

和

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

当我尝试使用静态惰性加载导入时，我得到了第一个错误：

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

于是我决定使用动态导入：

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

但是，这引发了第二个错误。

然后，我通过简单地将compilerOptions中的"module": "esNext"添加到tsconfig.json文件中，并将tsconfig.app.json和tsconfig.tns.json文件中的"module": "es2015"更新为"module": "esNext"来解决了这个问题。

这样对我解决了问题。

- Harrison O

这适用于在monorepo和Angular 8中使用的nrwl 8。谢谢。 - Exit196

是的，在Angular 8中，动态模块懒加载对我可行。 - Harrison O

3

尽管这个答案已经被接受，但我曾经遇到类似的问题，那是因为没有向惰性加载的模块添加路由模块。任何惰性加载的模块都必须有自己的路由模块，否则应用程序会重定向到默认路由。我知道这很基本，但有时我们会忽视这个事实。

- Arindam Dawn

0

对我来说问题出在了 tsconfig.json 文件中。一旦我将属性 "module" 更新为 "esnext"，它就正常工作了。

- PhoonOne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jojofoulk · Accepted Answer

经过大量的尝试，我设法解决了问题。这些尝试包括提供一个最小可重现示例、尝试更新或重新安装所有软件包以及深入挖掘并查找错误所在。

本质上，我将我的应用程序重新升级到了 Angular 8，就像我在使用 Angular 7 一样（尽管我本来就应该使用 Angular 8），使用以下命令：

ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only

如此线程中所述。

这将自动将所有旧的惰性加载语法更新为新的语法，并在构建/服务时，我终于能够看到每个模块的所有块了。

鉴于这些命令已解决问题，我相信问题出在软件包/依赖关系上。