angular - Angular4: keycloak.init() 内でアプリをブートストラップした後、Patternfly のセカンダリ ナビゲーションが機能しない

Question

キークローク認証を使用してAngular4アプリケーションを構成するのはこれが初めてです。ここでは、ナビゲーション メニューに patternfly を使用しています。最初に私のメニューは

このために、次のようにアプリをブートストラップしました：main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {KeycloakService} from './keycloak.service';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

platformBrowserDynamic().bootstrapModule(AppModule);

しかし、Keycloak を実装したときに、main.ts を変更しました。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {KeycloakService} from './keycloak.service';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


KeycloakService.init()
  .then(() => {
    platformBrowserDynamic().bootstrapModule(AppModule);
  })
  .catch(() => window.location.reload());

メニューの私のHTMLは次のとおりです。

<div class="nav-pf-vertical
            nav-pf-vertical-with-sub-menus
            nav-pf-vertical-collapsible-menus
            collapsed"
            >
  <ul class="list-group"  style="border-top:1px solid #efefef">
    <li class="list-group-item"  routerLinkActive="active">
      <a routerLink="orders">
        <span class="fa fa-folder-open"
          tooltip="{{'administration_myOrders_label' | translate}}"
          placement="right"
          container="body"></span>
        <span class="list-group-item-value">{{'administration_myOrders_label' | translate}}</span>
      </a>
    </li>
    <li class="list-group-item secondary-nav-item-pf"  data-target="#ipsum-secondary">
      <a>
        <span class="fa fa-list"
          tooltip="{{'administration_myQueues_label' | translate}}"
          placement="right"
          container="body"></span>
        <span class="list-group-item-value">{{'administration_myQueues_label' | translate}}</span>
      </a>
      <div id="ipsum-secondary" class="nav-pf-secondary-nav">
        <div class="nav-item-pf-header">
          <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
          <span>{{'administration_myQueues_label' | translate}}</span>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
          <li class="list-group-item">
            <a>
              <span class="list-group-item-value">Boston MA - Safety(workorder)</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

ここでは、このアプリで angular-cli を使用しています。そして、Angular 4.3.5 誰かが解決策を教えてください。注 : patternfly css を index.html にリンクして、webpacking の angular-cli.json から削除しようとしました。まだそれを機能させることができませんでした