我正在尝试使用路由器懒加载Angular 2模块,但出现了以下错误:
error_handler.js:50 EXCEPTION:Uncaught(in promise):Error:Cannot find module 'app/home/home.module'
我尝试了所有似乎对其他人有效的答案,比如这个看起来是每个遇到此问题的人的解决方案,但对我不起作用 Lazy loading in Angular2 RC7 and angular-cli webpack
这是我的代码:app.module
import { MediatorService } from './home/mediator.service';
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 appRoutes from "./app.routes";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
appRoutes
],
providers: [MediatorService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routes
:应用程序的路由配置。import { RouterModule } from '@angular/router';
const routes = [
{path : '', loadChildren: './home/home.module#HomeModule'},
{path: 'devis', loadChildren: './forms/forms.module#FormsModule'}
];
export default RouterModule.forRoot(routes);
home.module
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import homeRoutes from "./home.routes";
@NgModule({
imports:[CommonModule, homeRoutes],
declarations: [HomeComponent]
})
export default class HomeModule{}
主页路由
import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
{path: '', component: HomeComponent}
];
export default RouterModule.forChild(routes);
包json
{
"name": "insurance",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"bootstrap": "^4.0.0-alpha.5",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/jquery": "^2.0.34",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"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.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3"
}
}
更新
我设法在plunker上使其工作。
https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview
但是在我的电脑上还是没有任何反应!!!
更新
我安装了一个新的虚拟机ubuntu 16.04,并且我遇到了同样的问题!它可能是因为模块的版本吗,我指的是package.json上的模块?我该如何找出在plunker中使用的版本,因为它在那里运行。