[Ionic4][Angular][PWA] Error "Object(…)(…).auth is not a function" When Build –prod

enter image description here

My Environment

  • Operating System version: Windows 10 Pro
  • Browser version: Version 80.0.3987.87 (Official Build) (64-bit)
  • Firebase SDK version: “firebase”: “^7.8.2”
  • Firebase Product: auth
  • Ionic Version: Ionic 4

The problem is:

Steps to reproduce:

  • First, my apps are working if build without –prod flag, then the error occurred if –prod build
  • With –prod build another page is fine, but the error happens when I trying to open Login Page
  • I already doing the solution here Issue 1696
  • And here too Issue 1240

Relevant Code:

  • My app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { APIServiceService } from './services/apiservice.service';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuth } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    APIServiceService,
    AngularFireAuth
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

  • login.page.ts
import { Component} from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  public email: string;

  constructor(
    private router: Router,
    private fireAuth: AngularFireAuth
  ) { }

  async googleAuth() {
    try {
      const result = await this.fireAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
      this.email = result.user.email;
    } catch(error) {
        console.log(error)
    }
}
  • package.json (dependecies)
"dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "core-js": "^2.5.4",
    "firebase": "^7.8.2",
    "moment": "^2.24.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

Source: New feed
Source Url [Ionic4][Angular][PWA] Error "Object(…)(…).auth is not a function" When Build –prod