我已经使用 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:6.5.0
-
os: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>
我确定我错过了一些愚蠢的东西,但我尝试了各种选择,到目前为止还没有任何工作 . 鉴于我的配置,我错过了什么?
斯蒂芬,提前谢谢
2 回答
使用RC7,您可以执行以下操作:
别忘了“ # ”
然后杀死服务并重新启动它
它适用于angular-cli @ webpack
P.S:角度约定是为延迟加载的文件夹添加一个(),例如:家/
The problem is not present in RC7 anymore.
将工作 .
您使用的机制仍然是基于systemjs的 . 我无法使用"path#class"语法使用webpack . 所以我们
require
模块直接:首先我们需要es6-promise-loader:
npm i --save-dev es6-promise-loader
然后像这样定义你的路线:
{path:"lazy", loadChildren: () => require('es6-promise!./path/to/module')('ClassName')}
es6-promise-loader用以下内容替换上面的内容:
这是使用webpack加载模块的正确方法,但是放入每个路径都很麻烦 .