Angular 8延迟加载语法不起作用 [英] Angular 8 Lazy Loading Syntax Not Working

问题描述

我试图在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-only ng 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延迟加载语法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！