Angular 2项目，延迟加载子模块，在第一次编译尝试时未解析子模块

我有一个Angular 2（Angular cli 1.3.2）项目，该项目被分解为多个模块，并且延迟加载。主模块使用以下代码加载路由器内的子模块：

{
    path: 'module2',
    loadChildren: 'modules/module2/module2.module.ts#Module2Module',
    canActivate: [Guard]
},

当我运行

ng serve

时，它会给出以下错误消息：

ERROR in Could not resolve "modules/module2/module2.module.ts" from "<..>/app/app.module.ts".

无法从“/app/app.module.ts”解析“modules/module2/module2.module.ts”中的错误。 当我在项目中保存任何文件（触发重新构建）时，构建成功，两个模块都按预期工作。我甚至不需要更改文件

有没有办法解决这个问题，或者这可能是一个bug

---

谢谢

通过删除延迟加载找到了修复方法：

在

app.module.ts

文件中，包括导入

app.router.ts

和

modules/module2/module2.module.ts

文件。然后在“@NgModule”的“includes”部分中，确保Module2位于主应用程序路由器之前：

import { RouterModule, Router } from '@angular/router';
import { NgModule } from '@angular/core';

import { appRoutes } from './app.router';
import { Module2 } from './modules/module2/module2.module';

// Other imports

@NgModule({
  declarations: [..],
  imports: [
    ..,
    Module2,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [..],
  entryComponents: [..],
  bootstrap: [..]
})
export class AppModule {  }

我看到的错误是由于导入的顺序不正确，如的里程碑3所述

---

感谢评论建议解决方案的人

我认为你的答案可能不是最好的。您的应用程序正在编译，但您现在没有延迟加载。如果你的应用程序足够大，如果没有延迟加载，初始加载将非常缓慢

简单解释一下，延迟加载意味着它将在单独的javascript请求中加载这些模块，而不是将它们全部编译成一个大文件。这是非常可配置的，您可以主动延迟加载它们，或者在用户在站点中单击时加载它们。它非常好，对于大型生产应用程序的性能来说是必不可少的

我相信正如@AndreaM16所暗示的，你在路线中的路线是错误的。看起来您可能会称它为“Module2 module”，但它应该是“Module2”。试试这个：

{
    path: 'module2',
    loadChildren: './modules/module2/module2.module#Module2Module',
    canActivate: [Guard]
},

如果这不起作用，那么查看文件结构以及Module2代码会有很大帮助

---

还要注意的是，您还必须从AppModule的“./modules/Module2/Module2.module”语句中去掉Module2和import{Module2}。Webpack将在这些导入语句中搜索要打包到包中的内容。这就是为什么延迟加载使用了一个神奇的字符串，webpack找不到真正的模块代码，它也不会被捆绑到第一个javascript捆绑包中。Angular代码知道如何解析该字符串并加载该javascript模块，并且会延迟加载。

如果延迟加载可以缩短初始加载时间，我认为应该使用延迟加载

app routing.module.ts

应该有这样一个条目（假设

src/app

中的

modules

文件夹）

---

请注意，模块路径中没有文件扩展名。

似乎您正在从错误路径加载

Module2Module

。它可能是

/module2/module2.module.ts#Module2Module

？能否显示您的项目结构您不需要文件扩展名：loadChildren:'modules/module2/module2.module#Module2Module'，我尝试过使用和不使用文件扩展名-第一次编译时仍然失败，在任何文件被修改后仍然成功？您对模块目录的假设也是正确的。在我的第二个模块中，我有以下代码：

NgModule（..）export class module2 module{}

（它是用ng g模块生成的）。我的错误是，@William Moore应该有更精确的路径，去掉了.ts

{
    path: 'module2',
    loadChildren: './modules/module2/module2.module#Module2Module',
    canActivate: [Guard]
}