仅当ng服务--prod时AngularFire错误 [英] AngularFire error only when ng serve --prod

问题描述

我有一个Angular 8应用程序，使用npm软件包Angular Firebase(https://github.com/angular/angularfire2)，当我使用Angular CLI命令ng build --prod构建应用程序并将其部署到主机时，出现以下Chrome浏览器控制台错误:

I have an Angular 8 app, using npm package Angular Firebase (https://github.com/angular/angularfire2) and when I build the app with the Angular CLI command ng build --prod and deploy to my hosting I get the following Chrome Browser Console error:

TypeError: Object(...)(...).auth is not a function

如果我改用命令ng build --prod --optimization=false进行构建，则不会发生该错误.

If I instead build with the command ng build --prod --optimization=false the error does not occur.

将Angular CLI ng构建选项optimization设置为true时，会导致AngularFire2 npm软件包错误.

Something with Angular CLI ng build option optimization set to true is causing the AngularFire2 npm package error.

我不确定如何进一步调试此问题.这是我的package.json文件:

I am not sure how to debug this issue further. Here is my package.json file:

    {
  "name": "bigmoenyshot",
  "version": "8.0.0",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "serve": "ng serve",
    "serveProd": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --prod --optimization=true",
    "build": "ng build --prod=true --aot=true --extractCss=true --optimization=true",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "deploy": "ng build --prod=true --aot=true --extractCss=true --optimization=false && firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "8.0.0",
    "@angular/cdk": "8.0.1",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/fire": "^5.2.1",
    "@angular/flex-layout": "8.0.0-beta.26",
    "@angular/forms": "8.0.0",
    "@angular/material": "8.0.1",
    "@angular/material-moment-adapter": "^8.0.2",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/router": "8.0.0",
    "@ngu/carousel": "1.5.4",
    "@ngx-translate/core": "10.0.1",
    "@ngx-translate/http-loader": "3.0.1",
    "@swimlane/ngx-datatable": "15.0.2",
    "angular-calendar": "0.26.4",
    "angular-in-memory-web-api": "0.8.0",
    "angular-star-rating": "4.0.0-beta.3",
    "chart.js": "2.5.0",
    "classlist.js": "1.1.20150312",
    "core-js": "2.4.1",
    "css-star-rating": "1.2.4",
    "date-fns": "1.28.5",
    "echarts": "4.2.1",
    "firebase": "^6.2.4",
    "flag-icon-css": "3.3.0",
    "hammerjs": "2.0.8",
    "highlight.js": "9.15.6",
    "hopscotch": "0.3.1",
    "install": "0.12.2",
    "moment": "2.24.0",
    "ng2-charts": "2.2.2",
    "ng2-dragula": "2.1.1",
    "ng2-file-upload": "1.3.0",
    "ng2-validation": "4.2.0",
    "ngx-color-picker": "7.5.0",
    "ngx-echarts": "4.1.1",
    "ngx-pagination": "3.2.1",
    "ngx-perfect-scrollbar": "^8.0.0",
    "ngx-quill": "4.8.0",
    "npm": "6.9.0",
    "perfect-scrollbar": "1.4.0",
    "quill": "1.3.6",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.1.0",
    "web-animations-js": "github:angular/web-animations-js#release_pr208",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.6",
    "@angular-devkit/core": "7.3.8",
    "@angular/cli": "8.0.2",
    "@angular/compiler-cli": "8.0.0",
    "@angular/language-service": "8.0.0",
    "@types/hopscotch": "0.2.30",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.60",
    "codelyzer": "^5.0.1",
    "copy-webpack-plugin": "4.3.0",
    "enhanced-resolve": "3.3.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "~0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.1.0",
    "ts-node": "2.0.0",
    "tslint": "4.5.0",
    "typescript": "3.4.5"
  }
}

这是我导入AngularFire2库的地方:

And here is where I import the AngularFire2 Lib:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';
import { tap, map, take } from 'rxjs/operators';
import { Router } from '@angular/router';
import { User, auth } from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user: Observable<User>

  constructor(
    private firBase: AngularFireAuth,
    private router: Router // Inject Firebase auth service
  ) {
    this.user = this.firBase.authState;
  }

  isLoggedIn(redirectUrl: string, isLoggedInRedirect?: string): Observable<boolean> {
    console.log('AuthService.isLoggedIn'); return this.user.pipe(
      take(1),
      map(authState => !!authState),
      tap(authenticated => {
        if (!authenticated) {
          console.log('user not authenticated');
          this.router.navigate([redirectUrl]);
          return;
        }
        console.log('user Authenticated');
        if (isLoggedInRedirect) {
          this.router.navigate([isLoggedInRedirect]);
        }
      })
    );
  }

  getDisplayName(): string {
    return this.firBase.auth.currentUser.displayName;
  }

  // Sign up with email/password
  async signUp(email: string, password: string) {
    try {
      const result = await this.firBase.auth.createUserWithEmailAndPassword(email, password);
      console.log("successfully registered!");
      console.log(result.user);
    }
    catch (error) {
      console.error(error.message);
    }
  }

  // Sign in with email/password
  async signIn(email: string, password: string, rememberMe: boolean): Promise<string> {
    let session = 'session'; //only persist in the current session or tab, and will be cleared when the tab or window in which the user authenticated is closed

    if (rememberMe) {
      session = 'local'; //state will be persisted even when the browser window is closed or the activity
    }

    console.log('persistence type', session);
    try {
      const _ = await this.firBase.auth.setPersistence(session);
      const result = await this.firBase.auth.signInWithEmailAndPassword(email, password);
      console.log('signin success');
      return 'success';
    }
    catch (error) {
      console.error(error.message);
      return error.message;
    }
  }

  async signOut() {
    try {
      const _ = await this.firBase.auth.signOut();
      this.user = this.firBase.authState;
      console.log('signOut complete, currentUser', this.firBase.auth.currentUser);
    }
    catch (error) {
      console.error(error.message);
    }
  }

  async forgotPassword(email: string): Promise<string> {
    try {
      await this.firBase.auth.sendPasswordResetEmail(email);
      return 'Reset Email Sent';
    }
    catch (error) {
      console.error(error.message);
      return error.message;
    }
  }
}

这是我的app.module:

And here is my app.module:

import { NgModule, ErrorHandler } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GestureConfig } from '@angular/material';
import {
  PerfectScrollbarModule,
  PERFECT_SCROLLBAR_CONFIG,
  PerfectScrollbarConfigInterface
} from 'ngx-perfect-scrollbar';


import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './shared/inmemory-db/inmemory-db.service';

import { rootRouterConfig } from './app.routing';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ErrorHandlerService } from './shared/services/error-handler.service';
import { SessionsModule } from './views/sessions/sessions.module';

import { AngularFireModule } from '@angular/fire';
//import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
import { StartComponent } from './start.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    SessionsModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    AngularFireModule.initializeApp(environment.firebase),
    //AngularFirestoreModule,
    HttpClientModule,
    PerfectScrollbarModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }),
    RouterModule.forRoot(rootRouterConfig, { useHash: true, enableTracing: false })
  ],
  declarations: [AppComponent, StartComponent],
  providers: [
    { provide: ErrorHandler, useClass: ErrorHandlerService },
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

AngularFireFunctions遇到相同的问题.通过将AngularFireFunctionsModule添加到我的app.module.ts中来解决该问题.只需为您的产品构建打开sourceMaps，即可调试实际损坏的库.事实证明，如果没有该模块，一切都将在开发中正常运行，但是当您使用--prod标志优化器进行构建时，它会删除部分代码，而该代码本不应删除，并且还有松散的结局.

Had the same issue with AngularFireFunctions. Managed to solve it by adding AngularFireFunctionsModule to my app.module.ts. Just turn on sourceMaps for your prod build, so you can debug which library is actually broken. Turns out that without the module everything will work fine in development, but when you build with --prod flag optimizer removes parts of the code it shouldn't and there are loose ends left.

这篇关于仅当ng服务--prod时AngularFire错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！