Содержимое Angular Component не отображается после обновления до Angular 6.0

Question

Я обновил свой проект Angular 5.2 до Angular 6, включая обновление rxjs и установку rxjs-compat.

У меня есть целевая страница, которая устанавливает входную переменную isLoggedIn для компонента верхней панели, включенного в шаблон. Проблема в том, что содержимое верхней панели вообще не отображается на этой странице с момента обновления.

Глядя на элементы инструментов Chrome dev, я вижу компонент посадки и линию для компонента верхней панели, но никакого содержимого, как я ожидал.

Однако, если я добавлю компонент верхней панели непосредственно в компонент приложения, он будет отображаться как положено (но я не хочу его там). Компонент приложения, конечно, имеет выход маршрутизатора для целевой страницы, который затем должен содержать компонент верхней панели.

Ngrx работает нормально, устанавливает состояние, а селекторы работают нормально.

Есть идеи, что здесь может происходить?

Вот соответствующий код:

Компонент посадки html:

<wvr-top-bar [isLoggedIn]="loggedIn$ | async"></wvr-top-bar>
<router-outlet></router-outlet>

Компонент посадки ts:

import { Component, OnInit } from '@angular/core';

import {Router} from '@angular/router';
import {CognitoService} from '../../services/cognito.service';
import {Observable} from 'rxjs/Observable';
import {select, Store} from '@ngrx/store';

import * as fromUser from '../../reducers';

@Component({
  selector: 'wvr-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {

  loggedIn$: Observable<boolean>;

  constructor(
    private router: Router,
    public cognito: CognitoService,
    private store: Store<fromUser.State>) {

    this.loggedIn$ = this.store.pipe(select(fromUser.getLoggedIn));
  }

  public ngOnInit() {
    this.loggedIn$
      .subscribe((isLoggedIn) => {

        if (!isLoggedIn) {
          this.router.navigate(['login']);
        }
      });
  }
}

верхняя строка HTML

<div class="center-top">
  <a class="navbar-brand" href="#"><img src="../../../../assets/wvr-b.svg" alt=""></a>
</div>

<nav class="navbar navbar-inverse navbar-expand-md bg-color2">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <!--<span class="navbar-toggler-icon text-light"></span>-->
    <i class="fa fa-bars"></i>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">
        <a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Studio</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>

      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Future Feature</a>
      </li>
    </ul>
  </div>
</nav>
<div class="secondary-nav float-right">
  <ul class="navbar-nav">
    <li class="nav-item" *ngIf="isLoggedIn" (click)="logout()"><a class="nav-link" href="#">Sign Out</a></li>
    <li class="nav-item" *ngIf="!isLoggedIn" (click)="login()"><a class="nav-link" href="#">Log In</a></li>
    <li class="nav-item" *ngIf="isLoggedIn" routerLink='profile'>Profile</li>

    <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
  </ul>
</div>

компонент верхней панели ts:

import {Component, Input} from '@angular/core';
import {CognitoService} from '../../../user/services/cognito.service';
import {Router} from '@angular/router';

@Component({
  selector: 'wvr-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent {

  @Input() isLoggedIn;

  constructor(public cognito: CognitoService, private router: Router) { }

  logout() {
    this.cognito.signOut();
  }

  login() {
    this.router.navigate(['login']);
  }

}

Компонент приложения ts:

import {Component, OnInit} from '@angular/core';
import {CognitoService} from '../../../user/services/cognito.service';
import {Router} from '@angular/router';
import {Store} from '@ngrx/store';
import * as fromUser from '../../../user/reducers';
import {Observable} from 'rxjs/Observable';


@Component({
  selector: 'wvr-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  loggedIn$: Observable<boolean>;

  constructor(public cognito: CognitoService, private router: Router, private store: Store<fromUser.State>) {
    this.cognito.getCurrentUser();
    this.loggedIn$ = this.store.select(fromUser.getLoggedIn);

  }

  ngOnInit() {
    this.loggedIn$.subscribe((isLoggedIn) => {
      isLoggedIn ? this.router.navigate(['landing']) : this.router.navigate(['login']);
    });
  }
}

проверка элементов из devtools:

гадание