ИСКЛЮЧЕНИЕ: Неподготовлено (в обещании): Ошибка: не удается найти модуль '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
при разработке моего приложения. Каким-то образом попав в зону, я сохранил много файлов (скопируйте и вставьте из некоторых других проектов). Сборка работала, но не показала ошибок, но браузер показал эту ошибку.
Я закрыл сборку и восстановил ее снова, и все ошибки (не связанные с вышеописанным), которые не были показаны, обнаружились !!