Question

我有一个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".

当我在项目中保存任何文件（触发重新构建）时，构建成功并且两个模块都按预期工作。我甚至不需要更改文件！

有没有办法解决这个问题，或者这可能是个错误？

由于

Answer 1

我认为你应该使用延迟加载，如果它可以改善你的初始加载时间。

. .echo.应该有这样的条目（假设app-routing.module.ts中有modules个文件夹）

src/app

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

Answer 2

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

在app.module.ts文件中包含对app.router.ts和modules/module2/module2.module.ts文件的导入。然后在'@NgModule'的'includes'部分内确保Module2在主App路由器之前：

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 {  }

我看到的错误是由于Angular Routing Guide

的里程碑3中指定的导入顺序不正确

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

Answer 3

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

只是稍微解释一下，延迟加载意味着它会将这些模块加载到单独的javascript请求中，而不是将它们全部编译成一个巨大的文件。这是非常易于配置的，您可以积极地延迟加载它们，或者在用户在您的站点中点击时加载它们。对于大型制作应用程序来说，这是非常好的和必要的。

我相信@ AndreaM16建议您在路由中的路线是错误的。看起来你可能称之为“Module2Module”，但它应该只是“Module2”。试试这个：

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

如果这不起作用，那么查看文件结构可能会有很大帮助，也可能是Module2代码。

还有一点需要注意，您还必须从AppModule的“./modules/module2/module2.module”语句中删除Module2和import {Module2}。 Webpack将在这些import语句中搜索要捆绑到包中的东西。这就是为什么延迟加载使用魔术字符串，webpack不会找到真正的模块代码，它不会被捆绑到第一个javascript包。 Angular代码知道如何解析该字符串并加载该javascript模块，并且会懒得这么做。

具有延迟加载子模块的Angular 2项目在第一次编译尝试时无法解析子模块

3 个答案: