es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La ruta predeterminada de Angular siempre está precargada.

02 Jun, 2023 Programación

Tengo dos rutas:
– inicio [”]
– acerca de [‘acerca-de’]

Cuando voy directamente a /acerca-de con mi navegador, he notado 2 cosas:
– mi módulo de inicio se precarga (a pesar de que he solicitado /acerca-de)
– la URL se reescribe así: /acerca-de -> / -> /acerca-de

módulo app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./routes/home/home.module').then(m => m.RoutesHomeModule) },
  { path: 'acerca-de', loadChildren: () => import('./routes/about/about.module').then(m => m.RoutesAboutModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Componente app.component.ts

import { Component, OnInit } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent implements OnInit {

  constructor(
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        // output '/acerca-de' pero NUNCA '/'
        console.log(event.url);
      }
    });
  }

}

Angular: 13.0.2\
Chrome: 96.0.4664.55\
Sistema operativo: MacOS 12.0.1

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Explicación del comportamiento observado

    Cuando se navega directamente a /about, se observa que el módulo home se precarga y la URL se reescribe como /about -> / -> /about. Esto se puede explicar de la siguiente manera:

    • AppRoutingModule define dos rutas, una para el módulo home y otra para el módulo about.
    • Se utiliza la propiedad loadChildren para cargar perezosamente los módulos correspondientes cuando se accede a la ruta correspondiente.
    • Cuando se navega directamente a /about, el enrutador Angular carga primero AppRoutingModule, lo que a su vez precarga el módulo home ya que se define como la ruta predeterminada ('').
    • Luego, se carga y representa el módulo about, lo que resulta en la reescritura de la URL como / -> /about.

    Posible solución

    Para evitar que se precargue el módulo home y que se reescriba la URL, se puede modificar AppRoutingModule de la siguiente manera:

    const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', loadChildren: () => import('./routes/home/home.module').then(m => m.RoutesHomeModule) },
  { path: 'about', loadChildren: () => import('./routes/about/about.module').then(m => m.RoutesAboutModule) },
  { path: '**', redirectTo: '' }
];

    Con esta modificación, la ruta vacía ('') se redirige a la ruta home, que se define como la ruta predeterminada. Esto evita que se precargue el módulo home y también elimina la reescritura de la URL.

Comments are closed.