web-dev-qa-db-fra.com

EXCEPTION: Uncaught (promis): Erreur: Impossible de trouver le module 'app/home/home.module'

J'essaie de charger paresseux Angular 2 modules avec le routeur, et j'ai l'erreur suivante:

error_handler.js: 50 EXCEPTION: Uncaught (promis): Erreur: Impossible de trouver le module 'app/home/home.module'

J'ai essayé toutes les réponses qui semblent fonctionner pour les autres, comme celle-ci qui semble être une solution pour tout le monde confronté à ce problème, mais ne fonctionne pas avec moi Chargement paresseux dans Angular2 RC7 et angular-cli webpack

voici mon code: app.module

import { MediatorService } from './home/mediator.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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


import appRoutes from "./app.routes";


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

app.routes

import { RouterModule } from '@angular/router';

const routes = [
 {path : '', loadChildren: './home/home.module#HomeModule'},
 {path: 'devis', loadChildren: './forms/forms.module#FormsModule'}
];

export default RouterModule.forRoot(routes);

home.module

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import homeRoutes from "./home.routes";

@NgModule({
  imports:[CommonModule, homeRoutes],
  declarations: [HomeComponent]
})
export default class HomeModule{}

home.routes

import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
  {path: '', component: HomeComponent}
];

export default RouterModule.forChild(routes);

Package.json

{
  "name": "insurance",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "bootstrap": "^4.0.0-alpha.5",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "TypeScript": "~2.0.3"
  }
}

METTRE À JOUR

J'ai réussi à le faire fonctionner sur Plunker: 

https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

mais toujours rien sur ma machine !!!! 

METTRE À JOUR

J'ai installé une nouvelle machine virtuelle Ubuntu 16.04 Et le même problème !! Cela pourrait-il être quelque chose à propos des versions de modules, je veux dire celles de package.json !! Comment savoir quelles sont les versions utilisées dans Plunker? parce que cela a fonctionné là !!!

angularlazy-loadingangular2-routingangular-cliwebpack-dev-server
9
Zecide

J'ai réussi à le faire fonctionner, voici ce que j'ai fait: 

1 - Créez le code de routage dans le module (pas un fichier)

2 - Créez le fichier de module dans le répertoire parent du composant

3 - Supprimer le 'défaut' dans l'exportation comme ceci 

export DEFAULT class HomeModule { }

est devenu 

export class HomeModule { }

vous pouvez voir que cela fonctionne avec la beta 24 ici: https://github.com/mauricedb/lazy-routes

Je ne sais pas ce qui se passe !!!

1
Zecide

J'ai atterri sur cette question avec des symptômes et un contexte très similaires, il semble donc utile de remarquer que cette réponse à une autre question m'a aidé.

Dans mon cas particulier, je suivais un peu les modules de fonctionnalité paresseux docs , et j'ai même essayé de répliquer fidèlement l'exemple StackBlitz associé code. Pour une raison quelconque, cet exemple s'en tire avec:

loadChildren: 'app/customers/customers.module#CustomersModule'

Et même si mon expérience basée sur la CLI angulaire (v6) avait une structure de dossier similaire, je devais faire ceci:

// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'

ou ca:

// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'

On ne sait pas pourquoi l'exemple StackBlitz s'en tire avec le premier exemple de code, mais les deux autres sont tout à fait sensés et fonctionnent pour moi lorsque je fais ng serve.

9
Jeroen

Il semble que le moteur de rendu angular-cli rencontre des problèmes de chargement paresseux lorsque vous utilisez export default class SomeModule { } ... ainsi que quelques autres nuances.

C’est ce que j’ai fait pour résoudre le même problème "Erreur: module introuvable ..." lors du déploiement de Heroku:

  • Source tous les chemins loadChildren de la racine de l'application et inclure un hachage pour le nom de votre module
    • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
  • Remplacez export default class SomeModule { } par export class SomeModule { }
4
dustintheweb

Aussi bête que cela puisse paraître, sur Angular 6.

J'utilisais cette commande ng build --aot --watch lors du développement de mon application. En entrant dans la zone, j’ai sauvegardé beaucoup de fichiers (copier/coller depuis d’autres projets). La construction a fonctionné mais ne montrait pas les erreurs mais le navigateur a montré cette erreur. 

J'ai fermé la construction, et l'ai reconstruite à nouveau et toutes les erreurs (sans rapport avec ce qui précède) qui n'étaient pas affichées sont apparues !!.

0
Abdul Rehman Sayed

CLI angulaire: 6.1.5 Node: 8.11.3 OS: win32 x64

Angulaire: 6.1.6

loadChildren: './customers/customers.module#CustomersModule' fonctionne pour moi, mais je devais redémarrer le serveur.

0
Vishal