Angular2 lazy loading module error 'cannot find module' (erreur de chargement paresseux)

Question

J'ai essayé de trouver une solution pour cette erreur mais rien ne fonctionne pour moi. J'ai une simple application Angular2 créée avec Angular-CLI. Lorsque je sers cette application dans le navigateur, j'obtiens cette erreur : EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. J'ai essayé d'utiliser un chemin différent dans loadChildren :

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

Dossiers

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 { }

trace de la pile

        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

Answer 1

Redémarrage de ng serve a fonctionné pour moi

Answer 2

Pour les versions plus récentes d'Angular (10+ ?), le chargement paresseux est effectué en utilisant la syntaxe suivante :

{ path: "foos", loadChildren: () => import ("./foos/foo.module").then(m => m.FooModule) },

---

J'ai rencontré un problème similaire lorsque je travaillais avec Angular 4.4.5 et webpack et j'ai réussi à le résoudre sans utiliser de chaînes de caractères, mais une référence de type de module (beaucoup plus facile à écrire et moins sujette aux erreurs) :

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

Je n'ai pas pu trouver la version minimale d'Angular (loader) qui supporte cette syntaxe.

---

Un moyen qui pourrait fonctionner avec AOT est de remplacer la syntaxe lambda par une syntaxe régulière :

export function getTestModule() { return TestModule; }

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

---

Vérifiez également cette question (merci à rey_coder ).

Answer 3

J'ai été confronté à ce même problème. Je l'ai résolu en faisant les deux choses suivantes :

Dans la configuration de la route du module Root, utilisez loadChildren avec un chemin relatif vers le module angulaire chargé paresseusement. La chaîne est délimitée par un # où le côté droit du split est le nom de la classe du module chargé paresseusement.

J'ai ajouté ./ comme préfixe à l'adresse suivante loadChildren chaîne.

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

J'utilise webpack 2 et il a besoin d'un chargeur pour Angular 2 qui permet le chargement de modules basés sur des chaînes avec le routeur Angular. Ajoutez ceci au projet

yarn add angular-router-loader -D

puis ajoutez le angular-router-loader aux chargeurs de caractères

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

et ça marche pour moi.

Answer 4

Finalement, j'ai découvert que je dois importer le module chargé paresseux dans la configuration du routage de cette façon :

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

sans aucune / o ./ devant le chemin du module.

Answer 5

Ça a marché pour moi en utilisant.

../app/

J'ai résolu ce problème en utilisant la popup de suggestion dans le code VS. Vous pouvez également suivre cela. Pas besoin d'aller n'importe où. (Je pense que le chemin peut varier dans chaque projet).