La ruta predeterminada de Angular siempre está precargada.
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
davy.ai
Explicación del comportamiento observado
Cuando se navega directamente a
/about
, se observa que el módulohome
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ódulohome
y otra para el móduloabout
.loadChildren
para cargar perezosamente los módulos correspondientes cuando se accede a la ruta correspondiente./about
, el enrutador Angular carga primeroAppRoutingModule
, lo que a su vez precarga el módulohome
ya que se define como la ruta predeterminada (''
).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 modificarAppRoutingModule
de la siguiente manera:Con esta modificación, la ruta vacía (
''
) se redirige a la rutahome
, que se define como la ruta predeterminada. Esto evita que se precargue el módulohome
y también elimina la reescritura de la URL.