Angular 4 - Impossible de résoudre le sous-module pour le routage

Question

Je suis en train de construire une application web avec Angular 4. J'ai un module de routage de niveau supérieur et un module de routage distinct pour chaque sous-module (par exemple, HomeModule).

C'est ma configuration de routage de premier niveau :

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

Quand je cours ng server j'obtiens une erreur étrange, le module home n'a pas été trouvé. L'application ne fonctionne pas dans le navigateur.

La partie étrange est la suivante : Lorsqu'un fichier est modifié et que webpack recompile le projet, tout fonctionne très bien et le routage fonctionne.
L'erreur n'apparaît que lorsque je suis en train d'exécuter ng serve .

Voici l'erreur que j'obtiens lorsque j'exécute ng serve mais pas lorsque le projet est recompilé en raison d'un changement de fichier :

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)

Merci d'avance.

Answer 1

J'utilisais la convention de chemin absolu : app/home#HomeModule et il n'était pas de travail.

J'ai ensuite essayé le relatif convention de chemin : ./home#HomeModule et ça a marché.

... dans le CLI, les chemins des routes paresseuses doivent être relatifs au fichier dans lequel vous vous trouvez.

Source :

---

J'ai suivi ce Tutoriel et il a utilisé la convention de chemin absolu et ça a fonctionné.

J'aimerais bien savoir pourquoi cette incohérence...

---

UPDATE :

Comme Friedrich a mentionné pour le faire fonctionner en utilisant un chemin absolu, mettez à jour src/tsconfig.app.json comme suit :

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

Answer 2

J'ai eu le même problème et aucune des réponses ci-dessus n'a fonctionné pour moi, la solution finale que j'ai trouvée était d'utiliser le chemin absolu du module et le nom de la classe du module après le '#'.

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

J'ai commencé le chemin à partir de 'src' et n'oubliez pas d'enlever le '.ts' du chemin du module.

Answer 3

Vous devez supprimer le suffixe .ts de la référence à votre fichier de module : {path : '', loadChildren : 'app/pathToYourModule/home.module#HomeModule'},

Answer 4

J'ai rencontré un problème similaire et l'ai résolu en retirer l'extension du nom du module et en ajoutant un chemin relatif .

Code qui provoquait une erreur :

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

Code de travail :

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

J'espère que cela vous aidera !

Note : Sur la version d'Angular - 7.0.0

Answer 5

Essayez d'utiliser le chemin absolu de votre module avec le nom du fichier du module comme suit :

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