Ich versuche, Angular 2 Module mit dem Router zu laden, und es tritt folgender Fehler auf:
error_handler.js: 50 AUSNAHME: Ungefangen (in Versprechen): Fehler: Das Modul 'app/home/home.module' kann nicht gefunden werden
Ich habe alle Antworten ausprobiert, die für die anderen zu funktionieren scheinen, wie diese, die eine Lösung für alle zu sein scheint, die mit diesem Problem konfrontiert sind, aber bei mir nicht funktioniert Lazy loading in Angular2 RC7 und Angular-Cli Webpack
hier ist mein Code: 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"
}
}
UPDATE
Ich habe es geschafft, es am Plunker zum Laufen zu bringen:
https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview
aber immer noch nichts auf meinem Rechner !!!!
UPDATE
Ich habe eine neue virtuelle Maschine Ubuntu 16.04 und das gleiche Problem installiert! Könnte es etwas über die Modulversionen sein, ich meine die auf package.json !! Woher wissen, welche Versionen im Plunker verwendet werden? weil es dort geklappt hat !!!
Ich habe es geschafft, dass es funktioniert, hier habe ich getan:
1 - Machen Sie den Routing-Code im Modul (keine Datei)
2 - Machen Sie die Moduldatei im übergeordneten Verzeichnis der Komponente
3 - Löschen Sie den 'Standard' im Export auf diese Weise
export DEFAULT class HomeModule { }
wurden
export class HomeModule { }
sie können sehen, dass es mit Beta 24 funktioniert: https://github.com/mauricedb/lazy-routes
Ich weiß nicht was los ist !!!
Ich bin auf diese Frage mit sehr ähnlichen Symptomen und Zusammenhängen gestoßen, daher ist es nützlich zu bemerken, dass diese Antwort auf eine andere Frage mir geholfen hat.
In meinem speziellen Fall verfolgte ich die Dokumentation zu den Lazy Feature-Modulen und versuchte sogar getreu, das zugehörige StackBlitz-Beispiel Code zu replizieren. Aus irgendeinem Grund kommt dieses Beispiel durch:
loadChildren: 'app/customers/customers.module#CustomersModule'
Und obwohl mein Angular CLI (v6) -basiertes Experiment eine ähnliche Ordnerstruktur aufwies, musste ich Folgendes tun:
// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'
oder dieses:
// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'
Keine Ahnung, warum das StackBlitz-Beispiel mit dem ersten Codebeispiel davonkommt, aber die beiden anderen ergeben Sinn und funktionieren für mich, wenn ich ng serve
.
Es scheint, dass der angle-cli-Renderer Probleme mit dem verzögerten Laden hat, wenn Sie export default class SomeModule { }
... zusammen mit einigen anderen Nuancen verwenden.
Dies ist, was ich tat, um das gleiche "Fehler: Kann Modul nicht finden ...", das ich für die Heroku-Bereitstellung bekam, zu beheben:
loadChildren: 'app/main/some-module/some-module.module#SomeModule'
export default class SomeModule { }
in export class SomeModule { }
ändernFür mich musste ich den Module Map NgFactory Loader verwenden, den du machen kannst:
npm install @nguniversal/module-map-ngfactory-loader --save
fügen Sie dann den Modulzuordnungs-ngfactory-Loader zu Ihrem Servermodul hinzu:
import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
Beachten Sie auch die folgenden Hinweise in der Datei 'app-routing.module.ts', d.h.
const routes: Routes = [{path: 'login', loadChildren: './ login/login.module # L oginModule'}, {path: ' registration ', loadChildren:' ./ registration/registration.module # R egistrationModule '}];
oben sollten die fett gedruckten Buchstaben in Großbuchstaben geschrieben sein
So dumm es klingt, auf Angular 6.
Ich habe diesen Befehl ng build --aot --watch
beim Entwickeln meiner Anwendung verwendet. Irgendwie gelangte ich in die Zone, um eine Menge Dateien zu speichern (Kopieren und Einfügen aus anderen Projekten). Der Build funktionierte, zeigte jedoch keine Fehler an, aber der Browser zeigte diesen Fehler an.
Ich habe den Build geschlossen und neu aufgebaut und alle Fehler (die nicht in Zusammenhang mit dem obigen stehen), die nicht gezeigt wurden, wurden angezeigt !!.
Angular CLI: 6.1.5 Knoten: 8.11.3 Betriebssystem: win32 x64
loadChildren: './customers/customers.module#CustomersModule' funktioniert für mich, aber ich musste den Server neu starten.