CODEWITHSUNDEEP
javascriptangulartypescriptangular-router
user746019
user746019

Reputation: 33

Why is Angular loading my root template twice

My root component is loading twice even though I have a separate component for my homepage. I have tried to use different things, such as pathMatch, separate component, etc, but no luck. When I go to /dashboard, it works just fine, but when it loads the page initially (root page), the navbar is loaded twice. I want to avoid that.+

My code looks like this:

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 {}

And my HTML for RootComponent is:

<angular-navbar></angular-navbar>
<div class="layout">
    <router-outlet></router-outlet>
</div>

And navbar is:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand">My App</a>
    </div> 
</nav>

Example in inspect

Upvotes: 3

Views: 1290

Answers (4)

JBoothUA
JBoothUA

Reputation: 3149

I think the problem is with this code:

path: '',
component: RootComponent,

you most likely do NOT want to have your RootComponent here as it would allow the RootComponent to appear within your

<router-outlet>

and could explain why you have 2 of them.

<router-outlet>

should only route to CHILDREN of your RootComponent.

In other words, no route (in your routing config) should render your RootComponent it's already being rendered. The routes there should only render what you want to display WITHIN your router-outlet, aka CHILDREN of your RootComponent

For the solution I think you just have to make this:

path: '',
component: FeatureHomepageComponent

the first path in your config (delete the RootComponet part and the children:[] part)

Upvotes: 4

JuanDeLasNieves
JuanDeLasNieves

Reputation: 361

I think the problem might be that you have the route '' loading the RootComponent and the children route tries to load FeatureHomepageComponent but is also '', which can't be effectively resolved by the router.

Try giving the children route a path that is not empty, like this:

...
{
    path: '',
    component: RootComponent,
    pathMatch: 'full',
    children: [
      { 
        path: 'home',
        component: FeatureHomepageComponent
      }
    ]
  },
...

And play with the redirect at the end, so when your application loads, it should navigate to (for example) localhost:4200/home

Upvotes: 1

onrails
onrails

Reputation: 849

This means you have either of two: another <router-outlet></router-outlet> instance or you are instantiating the <angular-navbar></angular-navbar> in another template other than the one you show here. pathMatch has nothing to do here because the <angular-navbar></angular-navbar> component is route agnostic, meaning it is a layout component.

Upvotes: 0

FE Oll
FE Oll

Reputation: 71

Instead of calling the router-outlet try to call to the exact component name

Upvotes: 0

Related Questions