redireccionar - Angular 4-No se pudo resolver el submódulo para enrutamiento

rutas hijas angular 4

Question

Estoy creando una aplicación web con Angular 4. Tengo un módulo de enrutamiento de nivel superior y un módulo de enrutamiento separado para cada submódulo (por ejemplo, HomeModule).

Esta es mi configuración de enrutamiento de nivel superior:

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

Cuando ejecuto ng server , recibo un error extraño, no se encontró el módulo de home . La aplicación no funciona en el navegador.

La parte extraña es la siguiente: cuando se cambia un archivo y el paquete web vuelve a compilar el proyecto, todo funciona bien y el enrutamiento funciona.
El error solo aparece cuando estoy ejecutando ng serve .

Este es el error que recibo cuando ejecuto ng serve , no cuando el proyecto se vuelve a compilar debido a un cambio de archivo:

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)

Gracias por adelantado.

Answer 1

Debe eliminar el sufijo .ts de la referencia a su archivo de módulo: {path: '''', loadChildren: ''app / pathToYourModule / home.module # HomeModule''},

Answer 2

Estaba usando la convención de ruta absoluta: app/home#HomeModule y no estaba funcionando.

Luego probé la convención de ruta relativa : ./home#HomeModule y funcionó.

... en la CLI, las rutas a las rutas perezosas deben ser relativas al archivo en el que se encuentra

Source

Seguí este Tutorial y usé la convención de ruta absoluta y funcionó.

Me encantaría saber por qué la inconsistencia ...

ACTUALIZAR:

Como Friedrich mencionó , para hacer que funcione con una ruta absoluta, actualice src/tsconfig.app.json siguiente manera:

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

Answer 3

Intente utilizar la ruta absoluta de su módulo con el nombre de archivo del módulo de esta manera:

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

Answer 4

Me enfrenté a un problema similar y lo resolví eliminando la extensión del nombre del módulo y agregando una ruta relativa .

Código que estaba arrojando un error:

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

Código de trabajo:

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

¡Espero eso ayude!

Nota: En versión angular - 7.0.0

Answer 5

Tuve el mismo problema y ninguna de las respuestas anteriores funcionó para mí, la solución final que encontré fue usar la ruta absoluta del módulo y el nombre de la clase del módulo después del ''#''.

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

Comencé la ruta desde ''src'' y no olvide eliminar ''.ts'' de la ruta del módulo.