例外:未捕获(承诺):错误:找不到模块“app/home/home.module" [英] EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

问题描述

我正在尝试使用路由器延迟加载 Angular 2 模块，但出现此错误:

I'm trying to lazy load Angular 2 modules with the router, and I'm having this error:

error_handler.js:50 例外:未捕获(承诺):错误:找不到模块app/home/home.module"

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

我尝试了所有似乎对其他人有效的答案，就像这个似乎是每个人都面临这个问题的解决方案，但对我不起作用 Angular2 RC7 和 angular-cli webpack 中的延迟加载

I tried all the answers that seems to be working for the others, like this one which seems to be a solution for everybody facing this issue, but doesn't work with me 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{}

home.routes

import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
  {path: '', component: HomeComponent}
];

export default RouterModule.forChild(routes);

Package.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 上工作

I managed to make it work on plunker

https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

但我的机器上仍然没有任何东西！！！！

but still nothing on my machine !!!!

更新

我安装了一个新的虚拟机 ubuntu 16.04我有同样的问题！可能是因为模块的版本，我的意思是那些在 package.json 上的?我怎样才能找出 plunker 中使用的版本，因为它在那里工作.

I installed a new virtual machine ubuntu 16.04 and I have the same problem! Could it be because of the versions of the modules, I mean those on package.json? How can I find out the versions used in plunker because it worked on there.

推荐答案

我设法让它工作，这是我所做的:

I managed to make it work, here is what I done :

1 - 在模块中制作路由代码(不是文件)

1 - Make the routing code in the module ( not a file )

2 - 在组件的父目录中制作模块文件

2 - Make the module file in the parent directory of the component

3 - 像这样删除导出中的默认"

3 - Delete the 'default' in the export like this

export DEFAULT class HomeModule { }

变成了

导出类 HomeModule { }

您可以在此处看到它适用于 beta 24:https://github.com/mauricedb/lazy-routes

you can see that it works with beta 24 here : https://github.com/mauricedb/lazy-routes

我不知道发生了什么！！！

I don't know what is happening !!!

这篇关于例外:未捕获(承诺):错误:找不到模块“app/home/home.module"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！