CODEWITHSUNDEEP
angular
williamsandonz
williamsandonz

Reputation: 16430

Angular 2 Is rendering page twice on child route

I have the follow route in app.module.ts 

{
    path: 'settings',
    component: SettingsPage,
    children: [
    {
      path: 'account',
      component: AccountSettings
    }, {
      path: 'profile',
      component: ProfileSettings
    }]
  }

My settingsPage component has:

<div>
  <div class="xui-heading-panel secondary">
    <div class="container">
      <h1>Settings</h1>
      <ul class="nav nav-pills">
        <li 
          *ngFor="let link of links"
          role="presentation">
          <a [routerLink]="[link.route]" routerLinkActive="active">{{link.title}}</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

When visiting /settings/profile the router outlet inside settings component re-displays the entire page again (e.g not just child page). How can I fix this?

Upvotes: 1

Views: 1531

Answers (2)

PTak
PTak

Reputation: 62

If it helps to anyone I also faced this issue while lazily loading a module in children example const routes: Routes = [ { path: "", component: SiteLayout, canActivate: [AuthGuard], children: [ { path: "search", loadChildren: () => import('./Search/search.module').then(m => m.SearchModule) } ] } ]

here I was facing this re-rendering of page while routing to /search after spending a significant amount of time I got to knows that the in search module the RouteeModule was not imported which was causing application to behave like thi.

Hope it will help anyone stucked.

Upvotes: 1

williamsandonz
williamsandonz

Reputation: 16430

Thanks for the help guys. So the issue was that I didn't have

moduleId: __moduleName (inside my @Component annotation), this meant the templateUrl wasn't requested relative to the component directory. So an HTTP request was sent to /page_settings.html, which caused my server to return the /index.html and the entire app was rendered inside the container.

Upvotes: 0

Related Questions