Búsqueda de sitios web

javascript - Angular: Carga diferida de múltiples módulos con la misma ruta

Tengo una aplicación donde quiero cargar perezosamente dos módulos al mismo tiempo con la misma ruta.

Mi módulo de enrutamiento se vería así :

  {
    path: 'mypath',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },

   {
     path: 'mypath',
     loadChildren: () => AdvisorModule,
     canLoad: [AdvisorGuard]
   },

pero esto llevó a cargar solo el primero

No puedo encontrar ninguna forma de hacerlo así, por ejemplo:

  {
    path: 'mypath',
    loadChildren: () => HomeModule, advisor module // ??
    canLoad: [// ??]
  },

No quiero tampoco importar uno de ellos en el otro, ya que así, solo un módulo se cargaría de manera diferida y el otro automáticamente

¿Cómo podría hacerlo?

Respuesta #1

Necesitas reorganizar tus rutas por un nivel y también necesitas agregar rutas auxiliares para los componentes adicionales que quieres cargar.

Esto funciona con Angular 9 (probablemente también con la 8)

{
  path: 'home',
  component: HostingComponentWithOutlets,
  children: [
    {
      path: 'featureOne',
      loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
      canLoad: [featureOneGuard]
    },
    {
      path: 'featureTwo',
      outlet: 'outletAux1',
      loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
      canLoad: [featureTwoGuard]
    },
    // you can even load more components to different outlets from the same module
    // and update redirectTo and routerLink accordingly
    //{
    //  path: 'featureThree',
    //  outlet: 'outletAux2',
    //  loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
    //  canLoad: [featureTwoGuard]
    //},
    {
      path: '',
      redirectTo:
        '/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
      pathMatch: 'full'
    }
  ]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }

Acceder a la ruta 'home' cargará perezosamente todos los módulos requeridos.

En la plantilla HTML de tu HostingComponentWithOutlets donde necesitas enlazar con 'featureOne':

<a [routerLink]="featureOne/path-to-featureOne-component"

y si quieres ir directamente a la ruta completa con las rutas auxiliares desde una plantilla:

<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"

FeatureOneModule debería definir 'path-to-featureOne-component' y FeatureTwoModule debería definir 'path-to-featureTwo-component' en sus definiciones de ruta equivalentes.

Respuesta #2

Podrías rehacer las cosas así:

const routes: Routes = [
  {
    path: 'mypath/home',
    loadChildren: () => HomeModule,
    canLoad: [HomeGuard]
  },
  {
    path: 'mypath/advisor',
    loadChildren: () => AdvisorModule,
    canLoad: [AdvisorGuard]
  },
]

En otras palabras, mueve la ruta de tu módulo hacia el módulo padre, en este caso supongo que esos son 'adviser' y 'home'

Y luego simplemente empieza en el enrutamiento del módulo con una solución de redirección y/o una ruta como esta:

Enrutamiento del módulo de inicio:

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'home'
    component: HomeParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: HomeChildComponentOne },
    ],
  },
];

Enrutamiento del módulo de asesor

const routes: Routes = [
  {
    path: '', // <-- in your current solution probably 'advisor'
    component: AdvisorParentComponent,
    children: [
      { path: '', redirectTo: 'childOne', pathMatch: 'full' },
      { path: 'childOne', component: AdvisorChildComponentOne },
    ],
  },
];

Esto funciona bien, deberías poder navegar a:

'/mypath/home' y terminar dentro de tu HomeParentComponent con la salida del enrutador de HomeChildComponent.

'/mypath/advisor' y terminar dentro de tu AdvisorParentComponent con el outlet de router de AdvisorChildComponent.

En caso de que no quieras un componente hijo dentro de tu outlet de router, es aún más simple, puedes simplemente eliminar las rutas hijas y redirigir.

Nota: Si esta solución no resuelve su problema, por favor comparta más detalles sobre el enrutamiento de su módulo para que pueda tener una mejor idea de la configuración de ruta que desea.

Artículos relacionados