title: Header disappears on Angular 7 router
body: <p>I recently upgraded from angular 5 to 7. After watching <a href="https://youtu.be/LaIAHOSKHCQ?t=966" rel="nofollow noreferrer">this</a> presentation by Deborah Kurata from the most recent ng-conf, I decided to update my rather terrible routing code. </p>
  
  <p>I decided to implement her idea of a shell component on top of the app component to handle routing, then lazy-load each feature module as and when needed. Here's what I have so far:</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { Injectable, NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AccessGuard }           from './shared/guards/access.guard';
  import { LoginComponent }        from './login/login.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  
  export const appRoutes: Routes = [
    { 
      path: 'login', 
      component: LoginComponent, 
      data: { requiresLogin: false },  
      canActivate: [ AccessGuard ] 
    },
    { path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    imports: [ RouterModule.forRoot(appRoutes) ],
    exports: [ RouterModule ],
    providers: [ AccessGuard ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>So here you can see that I'm only concerned with the login and page-not-found views in the app root. Below is the shell.module that should be the primary router for everything else:</p>
  
  <p><strong>shell.component.html</strong></p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet name="primary"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>shell-routing.module.ts</strong></p>
  
  <pre><code>import { Injectable, NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { Observable }           from 'rxjs';
  
  import { AccessGuard }        from '../shared/guards/access.guard';
  import { DashboardComponent } from '../dashboard/dashboard.component';
  import { ShellComponent }     from './shell.component';
  
  export const shellRoutes: Routes = [
    { 
      path: '', 
      component: ShellComponent,
      data: { requiresLogin: true },
      canActivate: [ AccessGuard ],
      children: [
        { 
          path: 'dashboard', 
          component: DashboardComponent,
          data: { requiresLogin: true },
          canActivate: [ AccessGuard ] 
        },
        {
          path: 'posts',
          loadChildren: 'app/posts/posts.module#PostsModule'
        },
        {
          path: 'user-profile',
          loadChildren: 'app/user-profile/user-profile.module#UserProfileModule'
        }
      ]
    },
    { 
      path: '',
      redirectTo: '/dashboard', 
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    imports: [ RouterModule.forChild(shellRoutes) ],
    exports: [ RouterModule ],
    providers: [ AccessGuard ]
  })
  export class ShellRoutingModule {}
  </code></pre>
  
  <p>Again, as you can see, I'm lazy loading the Posts and UserProfile modules. And finally the aforementioned module routes:</p>
  
  <p><strong>posts-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule }             from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { AccessGuard }    from '../shared/guards/access.guard';
  import { PostsComponent } from './posts.component';
  import { PostComponent }  from './post/post.component';
  
  const postsRoutes: Routes = [
    {
      path: '',
      redirectTo: 'add',
      pathMatch: 'full'
    },
    {
      path: 'add',
      component: PostComponent,
      data: { requiresLogin: true },
      canActivate: [ AccessGuard ],
    },
    {
      path: 'comment/:id',
      component: PostComponent,
      data: { requiresLogin: true },
      canActivate: [ AccessGuard ],
    },
    {
      path: 'edit/:id',
      component: PostComponent,
      data: { requiresLogin: true },
      canActivate: [ AccessGuard ],
    } 
  ];
  
  @NgModule({
    imports: [ RouterModule.forChild(postsRoutes) ],
    exports: [ RouterModule ],
    providers: [ AccessGuard ]
  })
  export class PostsRoutingModule { }
  </code></pre>
  
  <p><strong>user-profile-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule }             from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { AccessGuard }  from '../shared/guards/access.guard';
  
  import { UserProfileComponent }   from './user-profile.component';
  import { FollowersComponent }     from './followers/followers.component';
  import { FollowingComponent }     from './following/following.component';
  import { MentorsComponent }       from './mentors/mentors.component';
  import { CoachesComponent }       from './coaches/coaches.component';
  import { NotificationsComponent } from './notifications/notifications.component';
  import { AdminMentorComponent }   from './admin-mentor/admin-mentor.component';
  
  const userProfileRoutes: Routes = [ 
    {
      path: 'user-profile',
      data: { requiresLogin: true },
      children: [
        {
          path: ':id',
          data: { requiresLogin: true },
          canActivate: [ AccessGuard ],
          children: [
            {
              path: '',
              component: UserProfileComponent,
            },
            {
              path: 'followers',
              component: FollowersComponent
            },
            {
              path: 'following',
              component: FollowingComponent
            },
            {
              path: 'mentors',
              component: MentorsComponent
            },
            {
              path: 'coaches',
              component: CoachesComponent
            },
            {
              path: 'notifications',
              component: NotificationsComponent
            }
          ]
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [ RouterModule.forChild(userProfileRoutes) ],
    exports: [ RouterModule ],
    providers: [ AccessGuard ]
  })
  export class UserProfileRoutingModule { }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>Why does, based on the above, the header appear on the posts routes but <strong>doesn't</strong> appear on the user profile routes?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I can't emulate the behaviour on StackBlitz unfortunately. Everything appears. I'll comment out my header.component code and replace it with something else to see if it appears.</p>
  
  <hr>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>As mentioned in my previous edit I can' emulate the behaviour correctly. The only other way I can think of to demo my problem is this: when I navigate to the <code>posts</code> route like this:</p>
  
  <pre><code>&lt;input placeholder="How are you today?" routerLink="/posts/add"&gt;
  </code></pre>
  
  <p>I can see in the DOM tree that the correct router-outlet is targeted (the one in the shell.component) and the post component (app-post) is slotted in beside it:</p>
  
  <p><a href="https://i.stack.imgur.com/8fnGv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8fnGv.png" alt="enter image description here"></a></p>
  
  <p>However, the components for the user-profile doesn't do this. They instead go in beside the app.component  instead of the one in the shell.component. I hardcoded the route to the user-profile like this:</p>
  
  <pre><code>&lt;p routerLink="/user-profile/6"&gt;Testing testing&lt;/p&gt;
  </code></pre>
  
  <p>to test but got the same disappearing header result.</p>
  
  <p><a href="https://i.stack.imgur.com/db3cb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/db3cb.png" alt="enter image description here"></a></p>
  
  <p>This is really odd behaviour to me. Both component routes are imported into the shell-routing.module and so should slot their components in beside it.</p>
  
  <p>So what gives?</p>
  
  <p>Also - am I correct in saying that when you attempt to navigate via "/some-path/here" you are using an <strong>absolute path</strong> instead of a relative one so it should work? Doot doot</p>