AngularFire2 app.auth is not a function

You are currently following demo application and I show there are lot of conflicts. But your aim here is to experiment with Angular and Firebase. I'm suggesting you to follow these steps.

Before that create a new Angular project.

eg.

ng new my-app

Now install the angularfire2 and firbase:

npm install angularfire2 firebase --save

Add Firebase config to environments variable:

firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }

Setup @NgModule for the AngularFireModule and AngularFireAuthModule :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

In you AppComponent import AngularFireAuth and auth:

import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase';

And implement following functions:

export class AppComponent {
  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

HTML:

<div *ngIf="afAuth.user | async as user; else showLogin">
  <h1>Hello {{ user.displayName }}!</h1>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login with Google</button>
</ng-template>

These steps are same as their DOC. Please refer bellow links:

• Installation and Setup
• Getting started with Firebase Authentication

Hope this will help you!

If anyone else comes across this issue, I eventually fixed it by deleting everything out of my node modules folder, deleting the package lock file and the running npm install.