ngx-auth-firebaseui 在遵循指南后无法正常工作，有关 StyleUtils 的错误

Question

我在按照说明使用ngx-auth-firebaseui 后收到此消息：

ERROR NullInjectorError: StaticInjectorError(AppModule)[DefaultLayoutAlignDirective -> StyleUtils]: 
  StaticInjectorError(Platform: core)[DefaultLayoutAlignDirective -> StyleUtils]: 
    NullInjectorError: No provider for StyleUtils!

出现在 AuthComponent.html: 50:

 <div fxLayout="column" fxLayoutAlign="center">

我已经安装了所有东西，包括 angular-flex。

在尝试了一整天之后，我不确定如何继续。

我已经更新了我的 app.module.ts、app.component.html，我的 environment.ts 已经保存了所有的令牌：

app.module.ts：

import { BrowserModule } from "@angular/platform-browser";
    import { AngularFireModule } from "@angular/fire";
    import { AngularFireAuthModule, AngularFireAuth } from "@angular/fire/auth";
    import { AngularFireDatabaseModule } from "@angular/fire/database"; */
    import { NgModule } from "@angular/core";
    import { FormsModule } from "@angular/forms";
    import { AppRoutingModule } from "./app-routing.module";
    import { AppComponent } from "./app.component";
    import { NavbarComponent } from "./components/navbar/navbar.component";
    import { HttpClientModule } from "@angular/common/http";
    import { ResultsService } from "./services/results.service";
    import { HomeComponent } from "./components/home/home.component";
    import { ResultsComponent } from "./components/results/results.component";
    import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
    import { environment } from "../environments/environment";
    import { LoginComponent } from "./components/login/login.component";
    import { NgxAuthFirebaseUIModule } from "ngx-auth-firebaseui";

    @NgModule({
      declarations: [AppComponent, NavbarComponent, HomeComponent, ResultsComponent, LoginComponent],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        BrowserAnimationsModule,
        NgxAuthFirebaseUIModule.forRoot({
          apiKey: environment.firebase.apiKey,
          authDomain: environment.firebase.authDomain,
          databaseURL: environment.firebase.databaseURL,
          projectId: environment.firebase.projectId,
          storageBucket: environment.firebase.storageBucket,
          messagingSenderId: environment.firebase.messagingSenderId
        })
      ],
      providers: [
        ResultsService,
        NgxAuthFirebaseUIModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

app.component.html：

<app-navbar></app-navbar>
<div class="container">
  <ngx-auth-firebaseui>
  </ngx-auth-firebaseui>
  <router-outlet></router-outlet>
</div>

Answer 1

我遇到了同样的问题，但能够让事情正常进行。

首先确保如果您使用的是 Angular 8，那么您也在使用

"@angular/flex-layout": "^8.0.0-beta.27"

接下来确保您已将 tslib 添加为依赖项。

yarn add tslib

然后最后添加

import { FlexLayoutModule } from '@angular/flex-layout';

到您的 app.module.ts 并导入 FlexLayoutModule

这解决了我的问题。

我从这个问题中得到了一些帮助：how do i include flex-layout