Angular Firebase 部署托管问题

Question

我正在尝试在 Firebase 托管上部署我的 Angular 应用程序。但它在加载程序后什么都没有显示，并且在控制台中显示错误。

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

它在本地服务器上运行良好。知道如何解决吗？

env.prod.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: 'xyzxaxasdaadsad',
    authDomain: 'localhost',
    databaseURL: 'https://puasda-e38c9.firebaseio.com/',
    projectId: 'puasda-e38c9',
    storageBucket: 'gs://puasda-e38c9.appspot.com',
    messagingSenderId: '205102099203'
  },

};

我的 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from "./shared/shared.module";
import { AgmCoreModule } from '@agm/core';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { StoreModule } from '@ngrx/store';

import { SnotifyModule, SnotifyService, ToastDefaults } from 'ng-snotify';


import { AppComponent } from './app.component';
import { ContentLayoutComponent } from "./layouts/content/content-layout.component";
import { FullLayoutComponent } from "./layouts/full/full-layout.component";

import { DragulaService } from 'ng2-dragula';
import { AuthService } from './shared/auth/auth.service';
import { AuthGuard } from './shared/auth/auth-guard.service';

import * as $ from 'jquery';
import { LoginComponent } from './auth/login/login.component';
import { RegisterComponent } from './auth/register/register.component';
import { ForgotComponent } from './auth/forgot/forgot.component';
import { environment } from '../environments/environment';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpInterceptorService } from './helpers/http-interceptor/http-interceptor.service';
import { AngularFireModule } from '@angular/fire'; 
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireStorageModule, StorageBucket } from '@angular/fire/storage';
import { ProductService } from './dashboard/add-product/product.service';
import { StoreFrontService } from './dashboard/store/store-front.service';

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    declarations: [
        AppComponent,
        FullLayoutComponent,
        ContentLayoutComponent,
        LoginComponent,
        RegisterComponent,
        ForgotComponent
    ],
    imports: [
        BrowserAnimationsModule,
        StoreModule.forRoot({}),
        AppRoutingModule,
        SharedModule,
        SnotifyModule,
        HttpClientModule,
        NgbModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        }),
        AgmCoreModule.forRoot({
            apiKey: 'AIzaSyBr5_picK8YJK7fFR2CPzTVMj6GG1TtRGo'
        }),
        AngularFireModule.initializeApp(environment.firebase, 'PUASDA'),
        AngularFireAuthModule,
        AngularFireStorageModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [
        { provide: 'SnotifyToastConfig', useValue: ToastDefaults },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpInterceptorService,
            multi: true
        },
        SnotifyService,
        AuthService,
        AuthGuard,
        DragulaService,
        AngularFirestore,
        { provide: StorageBucket, useValue: 'gs://puasda-e38c9.appspot.com' },
        ProductService,
        StoreFrontService,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

现在也附加 app.module.ts。我也不明白为什么会出现这个错误。任何的想法 ？

仅当我将应用程序上传到 Firebase 托管时才会显示此错误。并在本地主机或生产环境中工作

Answer 1

添加您在 enviroment.ts 文件中添加的 firebase 的身份验证，也在 enviroment.prod.ts 中。

在您的 environment.prod.ts

中

export const environment = {
  production: true,
  firebase : {
    apiKey: "API KEY", //add your API and same for rest keys
    authDomain: "DOMAIN NAME",
    databaseURL: "DATA BASE URL",
    projectId: "PROJECT ID",
    storageBucket: "STORAGE BUCKET",
    messagingSenderId: "MESSAGING ID",
    appId: "AP ID",
    measurementId: "MEASUREMENT ID"
  }
};

Answer 2

您的providers 中有AngularFirestore，但我认为您应该在imports 中使用AngularFirestoreModule。