Angular2 Lazy-Lademodulfehler "Modul kann nicht gefunden werden"

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.

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 }
];

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.

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

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.

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'

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

Du musst dich ändern

export default class TestModule { }

zu

export class TestModule { }

Das sollte deine Probleme beheben

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',
    },

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

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.

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.