提问者:小点点

例外:未捕获(promise中):错误:找不到模块“app/home/home. module”


我试图用路由器延迟加载Angular 2模块,我遇到了这个错误:

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

我尝试了所有似乎适用于其他人的答案,比如这个,它似乎是每个面临这个问题的人的解决方案,但不适用于我在Angular2 RC7和angang-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 { }

应用程序路由

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.路由

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

更新

我设法让它在普拉克上工作了

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

但是我的机器上还是什么都没有!!!!

更新

我安装了一个新的虚拟机ubuntu 16.04,我有同样的问题!可能是因为模块的版本,我的意思是那些在pack. json上?我怎么能找到在柱塞中使用的版本,因为它在那里工作。


共3个答案

匿名用户

对于Angular 8和9,延迟加载声明发生了变化。由于Angular 8引入了新的推荐模块加载方法,以前延迟加载模块的默认方法是指定模块的字符串路径:

{ path: 'auth', loadChildren: 'src/app/auth/auth.module#AuthModule' }

导入模块的方法已更改为动态导入。动态导入是基于Promise的,它允许您访问模块,可以在其中调用模块的类。因此,您的导入现在应该更改为:

  { path: 'auth', loadChildren: () => import('src/app/auth/auth.module').then(m => m.AuthModule) }

匿名用户

您需要将import{RouterModule}中的app-例程. module.ts从'@角/router';

const routes = [
 {path : '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 {path: 'devis', loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule) }
];

匿名用户

我在这个问题上遇到了非常相似的症状和背景,所以说这个对另一个问题的回答帮助了我似乎是有用的。

在我的具体案例中,我在某种程度上遵循了惰性功能模块文档,我甚至忠实地尝试复制相关的StackBlitz示例代码。出于某种原因,该示例逃脱了惩罚:

loadChildren: 'app/customers/customers.module#CustomersModule'

即使我基于AngularCLI(v6)的实验具有类似的文件夹结构,我也需要这样做:

// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'

或者这个:

// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'

不知道为什么StackBlitz示例逃脱了第一个代码示例,但其他两个都有意义,并且在执行ng service时对我有用。