web-dev-qa-db-fra.com

Erreur de module de chargement angular2 'Impossible de trouver le module'

J'essayais de trouver une solution à cette erreur mais rien ne fonctionne pour moi. J'ai simple Angular2 App créé avec Angular-CLI. Lorsque je sers cette application dans un navigateur, l'erreur suivante s'affiche: EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. J'essayais 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
angularmodulelazy-loading
36
arthurr

le redémarrage de ng serve a fonctionné pour moi

50
James Salamon

J'ai fait face au même problème. Je l'ai résolu en faisant 2 choses suivantes:

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

J'ai ajouté ./ comme préfixe à la chaîne loadChildren.

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

J'utilise Webpack 2 et il nécessite un chargeur pour Angular 2 qui permet le chargement de modules basé sur des chaînes avec le routeur angulaire. Ajouter ceci au projet

yarn add angular-router-loader -D

puis ajoutez le angular-router-loader aux chargeurs TypeScript

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

et ça marche pour moi.

30
Jasnan

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

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

Je ne pouvais pas trouver la version minimale pour Angular (loader) le supporte cette syntaxe.

Une façon qui pourrait fonctionner avec AOT est de remplacer la syntaxe lambda par une autre:

export function getTestModule() { return TestModule; }

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

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

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

sans / ou ./ devant le chemin du module.

11
arthurr

Cela a été travaillé pour moi en utilisant.

../app/

J'ai résolu ce problème en utilisant le menu contextuel de suggestion dans le code VS. Vous pouvez suivez aussi cela. Pas besoin d'aller n'importe où. (Je pense que le chemin peut varier en Chaque projet.)

2
Roney Francis

Je résous ce problème depuis quelques heures sur un projet dont je viens de prendre le relais. Aucune des solutions ci-dessus ne fonctionnait, mais j'ai alors réalisé que tous les modules chargés paresseux avaient l'extension .ts.

Si quelqu'un d'autre a des problèmes, vérifiez si vous devez changer loadChildren: 'app/example.module.ts' en loadChildren: 'app/example.module'.

1
Runny Yolk

assurez-vous d'inclure importer {Routes, RouterModule} de '@ angular/router'; dans le module pour charger paresseusement

1
da45

Vous devez changer

export default class TestModule { }

à

export class TestModule { }

Cela devrait résoudre vos problèmes

0
Wambua Makenzi

J'ai eu un problème similaire. Je viens de redémarrer le serveur et cela a fonctionné. :)

0
Ankita P.

Dans un scénario d'utilisation permettant de séparer une fonctionnalité distincte (par exemple, test.module.ts) de son application racine (par exemple, app.module.ts) via un module chargé paresseux, nous pourrions créer le module de test et ses composants dans un -folder (par exemple src/app/test /). Le module test-routing.module peut être configuré de la manière suivante:

//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);

Le module "parent" (app-routing.module.ts) aurait un itinéraire ressemblant à ceci:

//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);

Cela permet à l’application racine et au composant d’entrée, chargés impérativement, de charger ultérieurement les fonctionnalités de test.module.ts en tant qu’enfant si nécessaire.

0
Pageii Studio

Je change cela

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

}

pour ça

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

Et résolu mon problème.

0
Ruby Junior Dev