0

I get this message after following the instructions to use ngx-auth-firebaseui :

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

which occures here in AuthComponent.html: 50:

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

I've installed everything, including angular-flex.

I'm not sure how to proceed after trying things all day.

I have updated my app.module.ts, app.component.html, my environment.ts has all the tokens saved:

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>
artworkjpm
  • 1,255
  • 2
  • 19
  • 40

1 Answers1

3

I was having the same issue, but was able to get things working.

First make sure that if you are using Angular version 8 then you are also using

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

Next make sure you have tslib added as a dependency.

yarn add tslib

Then last add

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

to your app.module.ts and import FlexLayoutModule

This fixed my issues.

I got some help from looking at this issue: how do i include flex-layout

JAC
  • 46
  • 1