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

问题描述

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

I'm trying to implement Lazy loading into my Angular 8 application but when I use the syntax provided in the official doc, my module gets loaded eagerly.

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

When I use the syntax that comes with angular 8:

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

构建应用程序时没有错误，但没有得到新的块，并且导航至模块路由时，chrome的网络"选项卡中未显示任何内容. (尽管我可以很好地导航到该模块)

I get no error but I don't get a new chunk when I build the app, and when navigationg to the module route, nothing appears in the Network tab of chrome. (Although I can navigate to the module just fine)

但是如果我将其重写为:

But if I rewrite it to:

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

(这是旧语法)效果很好.

(which is the old syntax)it works fine.

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

The module in question is definitely not imported anywhere else, the difference in result comes only from changing the syntax.

我想知道那里是否缺少我想要的东西.我在想，也许是我的Angular未正确设置为版本8(或其他软件包)这就是我使用ng version的情况:

I'd like to know if there is something I'm missing there. I'm thinking maybe it's my Angular that isn't correctly set up to version 8 (or some other package)So here's what I have with a 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

我确实尝试创建了一个新的示例项目，并设法使其在那儿工作，但是据我所见，两个项目的所有内容都具有相同的版本.

I did try to create a new sample project and managed to get it to work there, but from what I can see, both projects have the same version of everything.

您知道什么会导致新语法无法正常工作吗?

Any idea what could cause the new syntax not to work?

推荐答案

在尝试提供一个最小的可复制示例之后，尝试更新我的所有软件包或重新安装它们，然后简单地挖掘所有文件并尝试为了找出问题所在，我设法解决了这个问题.

After a lot of digging between trying to provide a minimal reproducible example, trying to update all my packages or reinstalling them, and simply digging through all my files and try to find what was wrong, I managed to fix the issue.

我基本上将我的应用程序重新升级到了角度8，就好像我正在使用角度7(甚至我应该已经使用角度8)一样使用了此线程

I essentially re-upgraded my app to angular 8 as if I was using angular 7 (even tho I was supposedly already using angular 8) using the commands ng update @angular/cli --from 7 --to 8 --migrate-onlyng update @angular/core --from 7 --to 8 --migrate-only as mentionned in this thread

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

This updated all the old syntax of lazy loading to the new one automatically and on building/serving I could finally see all the chunks for each module

鉴于这些命令已修复，我相信问题出在某个地方的软件包/依赖关系.

Given that it was fixed with these commands, I believe the issue was with packages/dependencies somewhere.

这篇关于Angular 8延迟加载语法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！