Where do I add firebase.initializeApp() in my angular 7 project?

Question

Im trying to deploy my angular app to firebase hosting and I get the following error in console: Uncaught FirebaseError: "projectId" not provided in firebase.initializeApp.

I have this in my app.module.ts:

export class AppModule {
  constructor(private afs: AngularFirestore) {
    afs.firestore.settings({
     timestampsInSnapshots: true,
   });
   afs.firestore.enablePersistence();
   firebase.initializeApp(environment.firebase);
 }
}

Where exactly should I add the initializeApp command in app.module?

score 3 · Accepted Answer · answered Apr 25 '19 at 14:49

3

There are many ways. To initialize it at the very top, do it as follows

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    firebase.initializeApp(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Apr 25 '19 at 14:49

Severin Klug

733
5
9

Thanks, but I get the following error when adding it to imports: Type 'App' is not assignable to type 'any[] | Type | ModuleWithProviders<{}>'. Type 'App' is missing the following properties from type 'Type': apply, call, bind, prototype, and 4 more. – Badger 29 Apr 25 '19 at 15:01
imports: [ BrowserModule.withServerTransition({ appId: 'app' }), firebase.initializeApp(environment.firebase), – Badger 29 Apr 25 '19 at 15:02

score 0 · Answer 2 · answered Apr 25 '19 at 15:03

By the documentation, it should be right after the configs placed.

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

But Angular use it from the environment, so you can put it right on the first start.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    firebase.initializeApp(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you are using angularfire2:

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

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase, 'fcc-book-trading'),
        AngularFireDatabaseModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Where do I add firebase.initializeApp() in my angular 7 project?

2 Answers2

Linked