When injecting AngularFireAuth, app.auth() is not a function

[Qarun-Qadir-Bissoondial]

I'm a currently trying to use Angularfire2 authentication with my current angular 6 project. So I've initialized the project using AngularFireAuth.initializeApp(environment.config), I've imported AngularFireAuth module in my app.module and I've put AngularFireAuth as a provider in the app.module as well.
However, any component I try to inject AngularFireAuth into, it gives me a console error "TypeError: app.auth is not a function".

EDIT: I have tried the following suggestions: Issue #1707, Issue 1589, Issue 1776 among others to no avail.

Version info

@angular-devkit/architect 0.6.3
@angular-devkit/build-angular 0.6.3
@angular-devkit/build-optimizer 0.6.3
@angular-devkit/core 0.6.3
@angular-devkit/schematics 0.6.8
@angular/cdk 6.1.0
@angular/cli 6.0.8
@angular/flex-layout 2.0.0-beta.10-4905443
@angular/material 6.1.0
@ngtools/webpack 6.0.3
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3

Angular: 6.0.3
Firebase: 5.3.0
AngularFire: 5.0.0-rc.11

How to reproduce these conditions

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    FullComponent,
    AppHeaderComponent,
    AppSidebarComponent,
    ViewComponent,
    ErrorsComponent,
    AboutComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.config),
    AngularFireAuthModule,
    BrowserAnimationsModule,
    DemoMaterialModule,
    FormsModule,
    FlexLayoutModule,
    HttpClientModule,
    SharedModule,
    FileUploadModule,
    ReactiveFormsModule,
    RouterModule.forRoot(AppRoutes),
  ],
  providers: [
  {
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  },
    AngularFireAuth
  ],
  entryComponents: [ErrorsComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

login.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
import { Router } from '@angular/router';
import {AngularFireAuth} from 'angularfire2/auth';

/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return (control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AngularFireAuth]
})
export class LoginComponent implements OnInit {
  loginSuccess = 'WELCOME TO THE STUFF :D';
  fbApp: any;
  pattern = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})');
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

  pwordFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern(this.pattern)
  ]);

  matcher = new MyErrorStateMatcher();
  faculty: string;
  name: string;

  constructor(public router: Router, afAuth: AngularFireAuth) {
  }

  ngOnInit() {
  }

  login() {
    const email = (document.getElementById('userEmail') as HTMLInputElement).value;
    const pword = (document.getElementById('userPword') as HTMLInputElement).value;


  }

  logout() {
  }

  reroute() {
    this.router.navigate(['/home']);
  }

}

Debug output

** Errors in the JavaScript console **

Error: Uncaught (in promise): TypeError: app.auth is not a function
TypeError: app.auth is not a function
    at auth.js:12
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:4021)
    at new AngularFireAuth (auth.js:10)
    at createClass (core.js:10158)
    at _createProviderInstance (core.js:10133)
    at createProviderInstance (core.js:10016)
    at createViewNodes (core.js:11242)
    at createRootView (core.js:11169)
    at auth.js:12
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:4021)
    at new AngularFireAuth (auth.js:10)
    at createClass (core.js:10158)
    at _createProviderInstance (core.js:10133)
    at createProviderInstance (core.js:10016)
    at createViewNodes (core.js:11242)
    at createRootView (core.js:11169)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

I noticed from the stack trace that the error is thrown at auth.js, line 12. When I opened it up, this is what I saw:

It seems as though the _firebaseAppFactory function is using the configuration and creating a firebase app object, but the .auth() method doesn't seem to exist on that object.

** Screenshots **
Without injecting AngularFireAuth into the constructor

When injecting AngularFireAuth into constructor

Expected behavior

A login box should appear, allowing a person to enter an email and password.

Actual behavior

A blank page on the browser

[richarddavenport]

@Qarun-Qadir-Bissoondial stackblitz example
I don't know how to reproduce your issue, but it looks like you have a couple of issues with your providers. In your app module you're adding AngularFireAuth when it should be AngularFireAuthModule also, you're injecting the same AngularFireAuth (not AngularFireAuthModule) in the component, which shouldn't cause any problems, but rarely do you need providers in your components.
Here is a link to the documentation on the individual modules: docs

[jamesdaniels]

Yeah, I believe it's that your providing AngularFireAuth in the same module that your importing AngularFireAuthModule. Putting your example up on StackBlitz would be very helpful as we could fork it and help you get it running.

[vdias38]

Hi I've the same issue but with firestore app.firestore is not a function.
Tested on a fork of Angularfire stackblitz Template where I've injected AngularFireStore on app.component constructor. You can check my stackblitz demo.

[richarddavenport]

@vdias38 you need to upgrade the firebase package to at least 7. I forked your stackblitz project and only updated firebase to the latest, which as of right now is 7.2.1:
https://stackblitz.com/edit/angular-pqcbzp

[vdias38]

well done @richarddavenport thanks a lot for your help!