javascript - Angular 6 + keycloak 4，Javascript 库加载失败

Question

成功将 keycloak 与 angular 集成后，将收到 token 并返回配置文件数据。但是，“某些”javascript 功能不起作用。控制台没有报错，网络信息似乎没问题。如果我想从 AppModule 中删除提供者信息，页面加载正常，但是一旦调用 keycloak，页面上的切换功能就不起作用或者加载程序无限期地加载。如果我注释掉加载器，页面会出现，但切换菜单等功能不起作用。我不确定在将 keycloak 与 angular 集成时是否有人遇到过这个问题，并且可以指导我如何解决这个问题。

应用模块

@NgModule({
 declarations: [
   AppComponent
       ],
   imports: [
    BrowserModule,
    KeycloakAngularModule
    ],
    providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializer,
      multi: true,
      deps: [KeycloakService]
   } 
 ],
   bootstrap: [AppComponent]
})
export class AppModule { }

初始化函数

export function initializer(keycloak: KeycloakService): () => Promise<any> {
return () => 

             keycloak.init({
                config: environment.keycloak,
                initOptions: {
                    onLoad: 'login-required',
                    checkLoginIframe: false
                }
            }).catch((e) => {
                console.log("Error thrown in init "+e)
            });

HTML - 我将 app-side-mini-toggler 的 href 更改为 routerLink。如果不是，点击只会重定向到 localhost:4200/#，而不是切换

<div class="col-xl-5 col-lg-5 col-md-5 col-sm-3 col-4">
 <a class="mini-nav-btn" routerLink="#" id="app-side-mini-toggler">
                    <i class="icon-menu5"></i>
  </a>
  <a href="#app-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded="true">
    <i class="icon-chevron-thin-left"></i>
  </a>
</div>

With Loader, Page loads infinitely

Without Loader Page loads with user information but menu toggle does not work

Answer 1

Keycloak 可能会覆盖一些 Javascript 函数，具有某些依赖性，或者只能在特定版本的 Angular 中工作。

也许这个库对你有用:https://github.com/mauriciovigolo/keycloak-angular