Mi componente raíz se carga dos veces a pesar de que tengo un componente separado para mi página de inicio. He intentado usar diferentes cosas, como pathMatch , componente separado, etc., pero no tuve suerte. Cuando voy a /dashboard , funciona bien, pero cuando carga la página inicialmente (página raíz), la barra de navegación se carga dos veces. Quiero evitar eso.+
Mi código se ve así:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NavbarComponent } from './navbar/navbar.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { RouterModule, Routes } from '@angular/router'; import { RootComponent } from './root/root.component'; import { FeatureDashboardComponent } from '@angular/dashboard'; import { FeatureHomepageComponent } from '@angular/homepage'; const routes: Routes = [ { path: '', component: RootComponent, pathMatch: 'full', children: [ { path: '', component: FeatureHomepageComponent } ] }, { path: 'dashboard', component: FeatureDashboardComponent }, { path: '**', redirectTo: '' } ]; @NgModule({ declarations: [ NavbarComponent, RootComponent ], imports: [ BrowserModule, NgbModule, RouterModule.forRoot(routes)], providers: [], bootstrap: [RootComponent], }) export class AppModule {}Y mi HTML para RootComponent es:
<angular-navbar></angular-navbar> <div class="layout"> <router-outlet></router-outlet> </div>Y la barra de navegación es:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand">My App</a> </div> </nav>Creo que el problema podría ser que tiene la ruta '' cargando RootComponent y la ruta secundaria intenta cargar FeatureHomepageComponent pero también '' , que el enrutador no puede resolver de manera efectiva.
Intente darle a la ruta de los niños un camino que no esté vacío, así:
... { path: '', component: RootComponent, pathMatch: 'full', children: [ { path: 'home', component: FeatureHomepageComponent } ] }, ... Y juegue con la redirección al final, de modo que cuando su aplicación se cargue, debería navegar a (por ejemplo) localhost:4200/home
Creo que el problema es con este código:
path: '', component: RootComponent,lo más probable es que NO desee tener su RootComponent aquí, ya que permitiría que RootComponent apareciera dentro de su
<router-outlet>y podría explicar por qué tienes 2 de ellos.
<router-outlet>solo debe enrutar a CHILDREN de su RootComponent.
En otras palabras, ninguna ruta (en su configuración de enrutamiento) debe representar su RootComponent, ya se está procesando. Las rutas allí solo deben representar lo que desea mostrar DENTRO de la salida de su enrutador, también conocido como NIÑOS de su RootComponent
Para la solución, creo que solo tienes que hacer esto:
path: '', component: FeatureHomepageComponentla primera ruta en su configuración (elimine la parte RootComponet y los niños: [] parte)
En lugar de llamar a la router-outlet intente llamar al nombre exacto del componente