Angular 6 Router Repeating HTML

Question

I am trying to achieve the following:

1. I have a mat-toolbar component in app.component.html that displays the main top navbar of the site. Below the toolbar is <router-outlet></router-outlet>.
2. When a user navigates to the root at localhost:4200/ I want the top navbar to be visible and the all components associated with links in the navbar to be rendered under the top navbar.
3. The problem now is that the top navbar is repeated twice when the user navigates to the root. Clicking the links, the repeated navbar is removed and the proper component is rendered under the navbar (which is what I desire without the repeat).

Here is the app.module.ts

// initialization and module imports
const RootRoutes: Routes = [
 {path: "", redirectTo: "root", pathMatch: "full"},
 {path: "root", component: AppComponent, },
 //{path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];
// NgModule declaration

Here is how app.component.html is setup:

<div class="pure-g rr-main-wrapper">
    <div class="pure-u-5-5 home-top-navbar-wrapper">
        <rr-home-top-navbar></rr-home-top-navbar>
    </div>

</div> 
<router-outlet></router-outlet>

Here is how home-top-navbar.component.html is setup:

<mat-toolbar color="primary" class="home-top-nav">
  <mat-toolbar-row>
    <img src="./../../assets/imgs/logo2.png" width="200" height="50">
    <mat-nav-list class="home-top-nav">
      <mat-list-item *ngFor="let route of navbarRoutes">
        <a [routerLink]="[route.url]" class="navbar-link">{{ route.name }}</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-toolbar-row>

Now if you notice that there is commented out path, {path: 'home', component: HomeComponent} where, I tried loading the toolbar separately and have only <router-outlet></router-outlet> in app.component.html. However, the problem is when I click a link, the page navigates to the corrected component,
the top navbar is no longer visible (which is expected since, other components are not repeating the navbar code).

Is there any way to achieve this without repeating the toolbar twice when a user navigates to the root? Can this be done without copy/pasting the navbar on every page for top level components?

Answer 1

AppComponent should not be part of your Routes. It is because, AppComponent is the entry point of your app. In index.html, you have something like <rr-app></rr-app>. If there is a route which navigates to AppComponent (the route root), Angular will render AppComponent within router-content which ends up in two navbar and nothing else.

From my understanding, you do not need a route root.

Change your routing config to following.

/* 
 * Removed AppComponent and redirected "/" to "home"
 */
const RootRoutes: Routes = [
 {path: "", redirectTo: "home", pathMatch: "full"},
 {path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];