Angular2 RC7和angular-cli webpack中的懒加载

Question

我使用ng new创建了一个新的应用程序，但当我尝试配置一个使用惰性加载的模块时，我一直收到一个错误，提示找不到该模块。

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.9-4",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }

• Angular2 RC7
• Angular-cli: 1.0.0-beta.11-webpack.9-4
• Node.js: 6.5.0
• 操作系统: win32 x64

app.routing.ts:

（该文件包含应用程序的路由配置）

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
{
    path: `home`,
    loadChildren: `app/home/home.module`
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { routing } from './app.routing';

@NgModule({
  declarations: [
     AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.html

<router-outlet></router-outlet>

我相信我错过了一些愚蠢的东西，但我尝试了各种选择，到目前为止都没有成功。考虑到我的配置，我是否漏掉了什么？

提前感谢， 斯蒂芬

- Stephen Wilson

Answer 1

有了RC7，您可以执行以下操作：

const appRoutes: Routes = [
  {
    path: 'home',
    loadChildren: 'app/home/home.module#HomeModule',
  }
];

不要忘记“#”

然后杀掉ng serve并重新启动它

它将与angular-cli@webpack一起工作

P.S：Angular的惯例是用（+）前缀来懒加载文件夹，例如+home/

- Khosro

---

谢谢，这解决了我的问题。关闭 ng serve 并重新启动它对其正常运行至关重要。在你重新启动 ng serve 之前，它会提示找不到模块的错误。 - Yarrgh

我也遇到了同样的问题。我的Angular2 SystemJs配置中，loadChildren的值是相对路径。我采用了Khosro的方法，并将路径从"./home/home.module#HomeModule"改为"app/home/home.module#HomeModule"，最终解决了这个问题。 - Tom Schreck

对我来说这个方法行得通，但是在我的情况下，我必须使用路径'./home/home.module#HomeModule'导出模块，并且使用 'export class HomeModule { }' 而不是 'export default class HomeModule { }'。 - Carlos Araya

这对我也起作用了，但我必须执行rm -rf /node_modules /tmp，然后运行npm install。这是唯一的方法。 - Oriana Ruiz

Answer 2

在RC7版本中不再存在该问题。

{path:"lazy", loadChildren: 'app/path/to/module#Class'}

会起作用。

---

您正在使用的机制仍然基于systemjs。我无法在webpack中使用"path#class"语法使其正常工作。所以我们直接require模块：

首先，我们需要es6-promise-loader：

npm i --save-dev es6-promise-loader

然后像这样定义您的路由：

{path:"lazy", loadChildren: () => require('es6-promise!./path/to/module')('ClassName')}

es6-promise-loader将上述内容替换为以下内容：

loadChildren: () => new Promise(function (resolve) {
        require.ensure([], function (require) {
          resolve(require('./path/to/module')['ClassName']));
        });
      });

使用webpack加载模块的正确方式是什么，但在每个路由中都这样做很繁琐。

- j2L4e

---

这是Angular团队推荐的方法吗？我找不到任何支持这个方法的文档... - aaron-bond

我找不到任何文档能揭示使用webpack进行惰性加载的秘密。如果你查看堆栈跟踪，"path#class" 惰性加载机制显然是为SystemJS设计的。这是我所知道的唯一可行的方法。 - j2L4e

尽管我已经尝试过，但“path＃class”在跟踪中不存在。不确定问题出在哪里，是Angular RC7（可疑）还是Angular-Cli或Webpack？ - Stephen Wilson

请查看此处的堆栈跟踪 http://i.stack.imgur.com/u0s8z.png，以获取有关在使用Angular CLI和Webpack时尝试惰性加载功能模块时出现错误的信息https://dev59.com/uZrga4cB1Zd3GeqPrcDU#39496473。它正在使用`SystemJsNgModule-loader`，似乎不符合我们的需求。 - j2L4e

@j2L4e 关于 angular2-router-loader 和 angular-cli 的比较，目前看来它也支持 AOT：请参见 Loader options (AoT compilation)。 - superjos