webentwicklung-frage-antwort-db.com.de

AUSNAHME: Ungefangen (in Versprechen): Fehler: Das Modul 'app/home/home.module' kann nicht gefunden werden.

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 !!!

9
Zecide

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 !!!

1
Zecide

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.

13
Jeroen

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:

  • Beschaffen Sie sich alle loadChildren-Pfade aus dem App-Stammverzeichnis und fügen Sie einen Hash für Ihren Modulnamen ein
    • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
  • export default class SomeModule { } in export class SomeModule { } ändern
4
dustintheweb

Fü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 {}
2
Khaled Jamal

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

1
Ashish Devade

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 !!.

0

Angular CLI: 6.1.5 Knoten: 8.11.3 Betriebssystem: win32 x64

Winkel: 6.1.6

loadChildren: './customers/customers.module#CustomersModule' funktioniert für mich, aber ich musste den Server neu starten.

0
Vishal