webentwicklung-frage-antwort-db.com.de

Angular2 Lazy-Lademodulfehler "Modul kann nicht gefunden werden"

Ich habe versucht, eine Lösung für diesen Fehler zu finden, aber für mich funktioniert nichts. Ich habe eine einfache Angular2-App mit Angular-CLI erstellt. Wenn ich diese App im Browser bereitstelle, erhalte ich diese Fehlermeldung: EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. Ich habe versucht, einen anderen Pfad in loadChildren zu verwenden: 

'/app/test.module'
'./app/test.module'
'./test.module'
'/src/app/test.module'

Ordner

src/
  app/
    app-routing.module.ts
    app.component.ts
    app.module.ts
    test.component.ts
    test.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { RoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { path: '', loadChildren: '/app/test.module' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule { }

test.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

export const routes: Routes = [
  { path: '', component: TestComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [TestComponent],
  declarations: [TestComponent]
})
export default class TestModule { }

Stack-Trace

    error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.612 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.613 error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.
    at resolvePromise (zone.js:429)
    at zone.js:406
    at ZoneDelegate.invoke (zone.js:203)
    at Object.onInvoke (ng_zone_impl.js:43)
    at ZoneDelegate.invoke (zone.js:202)
    at Zone.run (zone.js:96)
    at zone.js:462
    at ZoneDelegate.invokeTask (zone.js:236)
    at Object.onInvokeTask (ng_zone_impl.js:34)
    at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.614 zone.js:355Unhandled Promise rejection: Cannot find module '/app/test.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module '/app/test.module'.(…) Error: Cannot find module '/app/test.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:49550:8)
    at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:57952:40)
    at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:57945:60)
    at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:22354:128)
    at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:22346:81)
    at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:61105:111)
    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:32515:27)
    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:32505:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:7085:18)
    at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:48555:24)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
2016-10-08 14:22:50.620 zone.js:357Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386
36
arthurr

der Neustart von ng serve hat für mich funktioniert

50
James Salamon

Ich bin mit demselben Problem konfrontiert. Ich habe es gelöst, indem ich folgende zwei Dinge getan habe:

Verwenden Sie in der Routenkonfiguration des Root-Moduls loadChildren mit einem relativen Pfad zum Lazy-Load-Winkelmodul. Die Zeichenfolge wird durch ein # getrennt, wobei die rechte Seite der Aufteilung der Klassenname des verzögert geladenen Moduls ist.

Ich habe ./ als Präfix zur loadChildren-Zeichenkette hinzugefügt.

{ path:'user', loadChildren:'./app/user/user.module#UserModule'}

Ich verwende Webpack 2 und es wird ein Loader für Angular 2 benötigt, der das Laden von stringbasierten Modulen mit dem Angular Router ermöglicht. Fügen Sie dies dem Projekt hinzu

yarn add angular-router-loader -D

fügen Sie dann den angular-router-loader zu TypeScript-Ladern hinzu

loaders: [
  {
    test: /\.ts$/,
    loaders: [
    'awesome-TypeScript-loader',
    'angular-router-loader'
    ]
  }
]

und es arbeitet für mich.

30
Jasnan

Bei der Arbeit mit Angular 4.4.5 und Webpack traf ich auf ein ähnliches Problem und konnte dieses Problem ohne Verwendung von Strings beheben. Die Modultyp-Referenz (viel einfacher zu schreiben und weniger fehleranfällig):

const routes: Routes = [
  { path: '', loadChildren: () => TestModule }
];

Ich konnte die minimale Version für Angular (Loader) nicht finden, die diese Syntax unterstützt.


Eine Möglichkeit, die mit AOT funktionieren könnte, besteht darin, die Lambda-Syntax durch eine normale zu ersetzen:

export function getTestModule() { return TestModule; }

const routes: Routes = [
  { path: '', loadChildren: getTestModule }
];
19
Alexei

Schließlich fand ich heraus, dass ich faul geladenes Modul in der Routing-Konfiguration folgendermaßen importieren muss:

const routes: Routes = [
   { path: '', loadChildren: 'app/test.module' }
];

ohne / oder ./ vor dem Modulpfad.

11
arthurr

Es wurde für mich gearbeitet mit.

../app/

Ich habe dieses Problem mithilfe des Popup-Vorschlags in VS-Code behoben. Sie können folge auch dem. Keine Notwendigkeit, irgendwohin zu gehen. (Ich denke, der Pfad kann in jedem Projekt unterschiedlich sein.)

2
Roney Francis

Ich habe dieses Problem seit einigen Stunden in einem Projekt behoben, das ich gerade übernommen habe. Keine der oben genannten Lösungen funktionierte, aber dann wurde mir klar, dass alle Module, die mit Lazy geladen wurden, die Erweiterung .ts hatten.

Wenn bei anderen Personen Probleme auftreten, prüfen Sie, ob Sie loadChildren: 'app/example.module.ts' in loadChildren: 'app/example.module' ändern müssen.

1
Runny Yolk

Ich habe mein eigenes Problem gelöst. Setzen Sie nicht das .ts im Pfadnamen. Anstatt 'path/to/my/module.ts#MyModuleClass', verwenden 'path/to/my/module#MyModuleClass'

1
alaboudi

stellen Sie sicher, dass Sie .__ einschließen. Importieren Sie {Routes, RouterModule} aus '@ angle/router'; im Modul, um das Laden zu erleichtern

1
da45

Du musst dich ändern

export default class TestModule { }

zu

export class TestModule { }

Das sollte deine Probleme beheben

0
Wambua Makenzi

In meinem Fall hatte der Pfad dieselbe Route wie an anderer Stelle angegeben, vorausgesetzt, es handelt sich um relative Pfade. z.B. wie unten in der

funktioniert nicht

Admin-Modul

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#AdminOrganisationModule',
    },

Benutzermodul

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#UserOrganisationModule',
    },

einzeln, wenn nur eine deklariert wurde, funktionierten diese einwandfrei, aber nicht zusammen, da sie sich über den Pfad ./organisation/organisation.module beschwerten. Ich habe beide in das unten stehende Muster geändert und es war in Ordnung.

Working

Admin-Modul

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../admin/organisation/organisation.module#AdminOrganisationModule',
    },

Benutzermodul

        {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../user/organisation/organisation.module#UserOrganisationModule',
    },
0
Ray_Hack

Ich hatte ein ähnliches Problem. Ich habe den Server gerade neu gestartet und es hat funktioniert. :)

0
Ankita P.

In einem Use-Case-Szenario, um ein bestimmtes Feature (z. B. test.module.ts) von seiner Stammanwendung (z. B. app.module.ts) durch ein langsam geladenes Modul zu trennen, könnten wir das Testmodul und seine Komponenten in einem Sub-Element erstellen -Ordner (zB src/app/test /). Das test-routing.module kann folgendermaßen konfiguriert werden:

//test-routing.module.ts
//routes to test.component.ts as an example

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const feature_test_routes: Routes = [

    { 
        path: '',
        component: TestComponent
    }

];

export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

Das "Eltern" -Modul (app-routing.module.ts) hätte eine Route, die wie folgt aussieht:

//app-routing.module.ts
//routes to http://localhost:4200/test

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const root_routes: Routes = [

    { 
        path: '',
        component: AppComponent, 
        children: [
            {
                path: 'test',
                loadChildren: './test/test.module#TestModule'
            }
        ]
    }

];

export const AppRoutingModule = RouterModule.forChild(root_routes);

Dadurch können die Root-Anwendung und die Eintragskomponente, die unbedingt geladen werden, später bei Bedarf Features aus test.module.ts als untergeordnetes Element laden.

0
Pageii Studio

Ich ändere das

{
            path: 'test',
            loadChildren: 'app/tests/test.module#TestModule'

}

dafür

   {
        path: 'test', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('app/tests/test.module').TestModule);
            })
        })
    },

Und mein Problem gelöst.

0
Ruby Junior Dev