webentwicklung-frage-antwort-db.com.de

Angular 4 - Das Submodul für das Routing konnte nicht aufgelöst werden

Ich erstelle eine Webanwendung mit Angular 4. Ich habe ein Routing-Modul der obersten Ebene und ein separates Routing-Modul für jedes Submodul (z. B. HomeModule).

Dies ist meine Routing-Konfiguration der obersten Ebene:

export const ROUTES: Routes = [
  {path: '', loadChildren: './home#HomeModule'},
  {path: '**', component: NotFoundComponent},
];

Wenn ich ng server, Ich bekomme einen seltsamen Fehler, das Modul home wurde nicht gefunden. Die App funktioniert nicht im Browser.

Der seltsame Teil ist der folgende: Wenn eine Datei geändert wird und Webpack das Projekt neu kompiliert, funktioniert alles einwandfrei und das Routing funktioniert.
Der Fehler wird nur angezeigt, wenn ich ng serve.

Dies ist der Fehler, den ich bekomme, wenn ich ng serve, nicht wenn das Projekt aufgrund einer Dateiänderung neu kompiliert wird:

ERROR in Error: Could not resolve module ./home relative to /path/to/my/project/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:30350:62)
    at parseLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28616:55)
    at listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28578:36)
    at visitLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Danke im Voraus.

29
Martin Fink

Ich habe die absolute Pfadkonvention verwendet: app/home#HomeModule und es funktionierte nicht .

Ich habe dann die relative Pfadkonvention ausprobiert: ./home#HomeModule und es hat funktioniert.

... in der CLI sollten die Pfade zu faulen Routen relativ zu der Datei sein, in der Sie sich befinden

Quelle


Ich folgte diesem Tutorial und es wurde die absolute Pfadkonvention verwendet und es funktionierte.

Würde gerne wissen, warum die Inkonsistenz ...


UPDATE:

Wie Friedrich erwähnt , damit es mit einem absoluten Pfad funktioniert, aktualisiere src/tsconfig.app.json wie folgt:

{
  ...,
  "compilerOptions": {
    ...,
    baseUrl: "./"
  }
}
78
spottedmahn

Ich hatte das gleiche Problem und keine der obigen Antworten funktionierte für mich. Die endgültige Lösung bestand darin, den absoluten Pfad des Moduls und den Namen der Modulklasse nach dem '#' zu verwenden.

    export const ROUTES: Routes = [
       {path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
       {path: '**', component: NotFoundComponent}
     ];

Ich habe den Pfad von 'src' gestartet und vergesse nicht, die '.ts' aus dem Modulpfad zu entfernen.

12
Sksaif Uddin

Sie müssen das Suffix .ts aus dem Verweis auf Ihre Moduldatei entfernen: {path: '', loadChildren: 'app/pathToYourModule/home.module # HomeModule'},

8
Michael Benoit

Ich habe ein ähnliches Problem festgestellt und durch Entfernen der Erweiterung aus dem Modulnamen und Hinzufügen eines relativen Pfads behoben.

Code, der einen Fehler ausgelöst hat:

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: 'app/setting/setting.module.ts#SettingsModule'
    }
];

Arbeitscode:

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: './setting/setting.module#SettingsModule'
    }
];

Ich hoffe es hilft!

Hinweis: On Angular version - 7.0.0

Versuchen Sie, den absoluten Pfad Ihres Moduls mit dem Namen der Moduldatei wie folgt zu verwenden:

export const ROUTES: Routes = [
  {path: '', loadChildren: 'app/pathToYourModule/home.module.ts#HomeModule'},
  {path: '**', component: NotFoundComponent},
];
2
Carlos Rincones

Wenn Sie keine Lösung finden, entfernen Sie einfach die Erweiterung ".ts" aus der loadChildren-Zeile.

 {path: '', loadChildren: './home.ts#HomeModule'},

zu

{path: '', loadChildren: './home#HomeModule'},
1
Sagar Khatri

Ich bin auf dieses Problem gestoßen, für mich habe ich einfach vergessen, .module auf den Dateinamen.

Ich hatte das:

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found#PageNotFoundModule' // <- page-not-found missing .module
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];

Sollte sein:

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found.module#PageNotFoundModule'
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];
0
Wayne