web-dev-qa-db-fra.com

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

Je construis 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).

Voici ma configuration de routage de niveau supérieur:

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

Lorsque je lance ng server, une erreur étrange se produit, ce 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 correctement et le routage fonctionne.
L'erreur n'apparaît que lorsque j'utilise ng serve.

C'est l'erreur que je reçois lorsque j'exécute ng serve, pas lorsque le projet est recompilé à cause 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.

angularangular-ui-router
29
Martin Fink

J'utilisais la convention de chemin absolu: app/home#HomeModule et cela ne fonctionnait pas .

J'ai ensuite essayé la convention de chemin relative : ./home#HomeModule et cela a fonctionné.

... dans la CLI, les chemins d'accès aux itinéraires paresseux doivent être relatifs à partir du fichier dans lequel vous vous trouvez

Source

J'ai suivi ceci Tutorial et il a utilisé la convention de chemin absolu et cela a fonctionné.

J'adorerais savoir pourquoi cette incohérence ...

UPDATE:

Comme mentionné par Friedrich , pour que cela fonctionne avec un chemin absolu, mettez à jour src/tsconfig.app.json comme suit:

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

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 utilisait 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 depuis 'src' et je n'oublie pas de supprimer le '.ts' du chemin du module.

12
Sksaif Uddin

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

8
Michael Benoit

J'ai fait face à un problème similaire et résolu par en supprimant l'extension du nom du module et en ajoutant un chemin relatif.

Code qui lançait 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 ça aide!

Note: Sur Angular version - 7.0.0

4
Vikash Kumar Choudhary

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

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

Pour ceux qui ne trouvent pas de solution, supprimez simplement l’extension ".ts" de la ligne loadChildren.

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

à

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

Je suis tombé sur ce problème. Pour moi, j’ai simplement oublié d’ajouter .module au nom du fichier.

J'ai eu ceci:

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'
  }
];

Devrait être:

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