仅当 ng serve --prod 时出现 AngularFire 错误

Posted 2023-02-22

技术标签:

【中文标题】仅当 ng serve --prod 时出现 AngularFire 错误【英文标题】：AngularFire error only when ng serve --prod 【发布时间】：2019-11-19 13:53:58 【问题描述】：

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

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

如果我改为使用命令ng build --prod --optimization=false 构建，则不会发生错误。

Angular CLI ng 构建选项 optimization 设置为 true 导致 AngularFire2 npm 包错误。

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

    
  "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 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：

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

【问题讨论】：

您已经在 JSON 文件中设置了这个 --optimization=true。您想将其更改为false 还是您需要？ @UtkarshDubey 我的目标是 Angular CLI 构建默认值 optimization=true，应用程序仅在当前 optimization=false 时才有效试试这个firebase.default.auth。参考：firebase auth @UtkarshDubey 我有那个是针对 ReactJs 和 vanilla javascript 的。这是打字稿无论你在哪里找到这行this.firBase.auth.，你能不能把它换成这行this.firBase.default.auth.。 【参考方案1】：

在我的情况下，在 app.module.ts 中使用 AngularFireAuthModule 和 AngularFirestoreModule 是有效的，因为我在我的应用程序中同时使用了这两个模块。

imports: [
    ...
    AngularFireAuthModule,
    AngularFirestoreModule,
    ...],

【讨论】：

【参考方案2】：

AngularFireFunctions 也有同样的问题。设法通过将 AngularFireFunctionsModule 添加到我的 app.module.ts 来解决它。只需为您的产品构建打开 sourceMaps，这样您就可以调试实际损坏的库。事实证明，如果没有该模块，一切都会在开发中正常工作，但是当您使用 --prod 标志优化器构建时会删除它不应该删除的部分代码，并且会留下松散的结尾。

【讨论】：

【参考方案3】：

我遇到了同样的问题。回到

"@angular/fire": "~5.1.0",

解决了这个问题，虽然有一些关于版本与其他包不兼容的警告（没有编译或运行时错误）。

【讨论】：

【参考方案4】：

通过导入我在错误组件上使用的 firebase 依赖项解决了这个问题，您可以这样做：

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/firestore';
import  environment  from '../../../environments/environment';

constructor(
    private afAuth: AngularFireAuth,
    private afFirestore: AngularFirestore,
    private afStorage: AngularFireStorage
  ) 
    try 
      firebase.app();
     catch (err) 
      firebase.initializeApp(environment.firebaseConfig);

不要忘记将你的 firebase 配置放在你的环境文件中

【讨论】：

【参考方案5】：

根据@jamesdaniels 回答this

npm install rxjs@6 rxjs-compat@6 --save

它解决了这个问题。

这是您的解决方案Credit @Biswajit

【讨论】：

已经安装了该软件包，请参阅我的问题中包含的 package.json 文件【参考方案6】：

这不是完整的答案，只是我的研究。我把它放在这里，希望它对某人有帮助。

检查此命令

node --max-old-space-size=8000 ./node_modules/@angular/cli/bin/ng build --prod --aot=false --optimization=true --sourceMap=false --buildOptimizer=false

评论：可以吗！删除 AOT 标志或将其设为 false？

参考： https://github.com/angular/angular-cli/issues/14666#issuecomment-507057022

buildOptimizer 不再工作

--buildOptimizer=false

参考： https://github.com/angular/angular-cli/issues/10658#issuecomment-387296781

参考： https://github.com/angular/angular-cli/issues/10655#issuecomment-449319049

--source-map 生成 10% 的小应用

参考： https://github.com/angular/angular-cli/issues/11129#issuecomment-396274621

设置目标为es5，构建目标es2015有这些问题

参考： https://github.com/datorama/akita/issues/179#issuecomment-472505123

参考： https://github.com/angular/angular-cli/issues/7799#issuecomment-387167797

【讨论】：

以上是关于仅当 ng serve --prod 时出现 AngularFire 错误的主要内容，如果未能解决你的问题，请参考以下文章

构建 Angular 8 项目时出现空白页面，但使用“ng serve”可以完美运行

在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度''

使用 ng build --prod 构建时出错。没有 --prod 标志和 ng serve 很好

Angular 8 - ng build prod 在 ng serve 工作时显示错误 - 模块导入的意外值“未定义”

无法解析 Staging & Prod 上的所有参数（AOT、buildOptimizer）（ng 服务工作）

在 vue 项目中运行 npm run serve 时出现问题