时间戳

首页 > 解决方案 > Angular 8延迟加载语法不起作用

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

问题描述

我正在尝试在我的 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

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

知道什么可能导致新语法不起作用吗？

标签： angular

解决方案

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

我基本上使用此线程ng update @angular/cli --from 7 --to 8 --migrate-only ng update @angular/core --from 7 --to 8 --migrate-only中提到的命令将我的应用程序重新升级到 angular 8，就好像我正在使用 angular 7（即使我应该已经使用 angular 8）

这会自动将延迟加载的所有旧语法更新为新语法，并且在构建/服务时我终于可以看到每个模块的所有块

鉴于它已通过这些命令修复，我相信问题出在某个地方的包/依赖项上。

推荐阅读