Angular Firebase развернуть хостинг проблема

Question

Я пытаюсь развернуть приложение angular на хостинге Firebase. Но он ничего не показывает после загрузчика и показывает ошибку в консоли.

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. И работает в localhost или производство

Answer 1

У вас есть AngularFirestore в вашем providers, но я думаю, что вы должны иметь AngularFirestoreModule в вашем imports вместо.

Answer 2

Добавьте аутентификацию firebase, которую вы добавили в файл enviroment.ts также в 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"
  }
};