ИСКЛЮЧЕНИЕ: Неподготовлено (в обещании): Ошибка: не удается найти модуль 'app/home/home.module'

Я пытаюсь лениво загрузить модули Angular 2 с маршрутизатором, и у меня появляется эта ошибка:

error_handler.js: 50 ИСКЛЮЧЕНИЕ: Uncaught (в обещании): Ошибка: не удается найти модуль 'app/home/home.module'

Я попробовал все ответы, которые, кажется, работают для других, как этот, который, кажется, решение для всех, сталкивающихся с этой проблемой, но не работает со мной Ленивая загрузка в Angular2 RC7 и 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"
  }
}

ОБНОВИТЬ

Мне удалось заставить его работать на плункере:

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

но все равно ничего на моей машине !!!!

ОБНОВИТЬ

Я установил новую виртуальную машину Ubuntu 16.04 и та же проблема! это может быть что-то о версиях модулей, я имею в виду те, что на package.json! как узнать, какие версии используются в плункере? потому что это сработало там !!!

ОТВЕТЫ

Ответ 1

Мне удалось заставить его работать, вот что я сделал:

1 - Сделать код маршрутизации в модуле (а не в файле)

2 - Сделайте файл модуля в родительском каталоге компонента

3 - Удалите 'default' в экспорте, подобном этому

export DEFAULT class HomeModule { }

стал

export class HomeModule { }

вы можете видеть, что он работает с бета-версией 24 здесь: https://github.com/mauricedb/lazy-routes

Я не знаю, что происходит!!!

Ответ 2

Я приземлился на этот вопрос с очень похожими симптомами и контекстом, поэтому представляется полезным заметить, что этот ответ на другой вопрос помог мне.

В моем конкретном случае я несколько следил за ленивыми документами модулей функций, и я даже точно пытался воспроизвести соответствующий пример кода StackBlitz. По какой-то причине этот пример уходит с:

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

И хотя мой эксперимент с Угловым CLI (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 serve.

Ответ 3

Кажется, что средство angular -cli имеет проблемы с ленивой загрузкой, когда вы используете export default class SomeModule { }... наряду с несколькими другими нюансами.

Это то, что я сделал, чтобы решить ту же "Ошибка: не могу найти модуль..." Я начал развертывание Heroku:

  • Исправить все пути loadChildren из корня приложения и включить хэш для имени вашего модуля
    • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
  • Измените export default class SomeModule { } на export class SomeModule { }

Ответ 4

Для меня мне пришлось использовать Module Map NgFactory Loader, который вы можете сделать:

npm install @nguniversal/module-map-ngfactory-loader --save

затем добавьте module-map-ngfactory-loader в свой серверный модуль:

import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Ответ 5

Также позаботьтесь о следующем в файле app-routing.module.ts, т.е.

const route: Routes = [{путь: 'логин', loadChildren: './login/login.module # L oginModule'}, {путь: 'регистрация', loadChildren: './registration/registration.module # R egistrationModule' }];

сверху жирные буквы должны быть заглавными

Ответ 6

Angular CLI: 6.1.5 Узел: 8.11.3 ОС: win32 x64 Angular: 6.1.6

Ответ 7

Как бы глупо это не звучало, на Angular 6.

Я использовал эту команду ng build --aot --watch при разработке моего приложения. Каким-то образом попав в зону, я сохранил много файлов (скопируйте и вставьте из некоторых других проектов). Сборка работала, но не показала ошибок, но браузер показал эту ошибку.

Я закрыл сборку и восстановил ее снова, и все ошибки (не связанные с вышеописанным), которые не были показаны, обнаружились !!