initialize firebase in angular 6 without angularfire

Question

I want had a project that initialize firebase by using AngularFire. However, during the entire development I didn't use much function from AngularFire. I always import the firebase/app at every services and use the respective function like firebase.auth() or firebase.database().

With that experience, I would like to initialize the firebase without AngularFire since I am not using the AngularFire methods.

Now come with my problem is I can't find any source to teach me how to initialize the firebase, and of course I am seeing error during importing the firebase at app.module.ts.

Below is my code:

Install the firebase by using: npm i firebase

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

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

import * as firebase from 'firebase';
import { environment } from '../environments/environment'; //API key is imported



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

At the line of firebase.initializeApp(environment.firebase), it shows the error:

Type 'App' is not assignable to type 'any[] | Type<any> | 
ModuleWithProviders<any>'.
Type 'App' is not assignable to type 'ModuleWithProviders<any>'.
Property 'ngModule' is missing in type 'App'.

Thanks in advance.

Answer 1

I would say you are having this error because firebase.initializeApp(environment.firebase) is not Angular Module.

I would suggest that you do this initialisation in one of your services or create a service for that effect.

@Injectable({
    providedIn: 'root'
})
export class FirebaseService {
    constructor() {
        firebase.initializeApp(environment.firebase)
    }
}

Answer 2

Well, you cannot import an object which is not an Angular module and you get that error because of that.

You can:
1. Use it in the AppModule constructor like:

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

2. Create a dedicated service for Firebase in which you will import 'firebase' lib (which is a good overall solution which will be probably used in your application globally).

@Injectable({
        providedIn: 'root' // <-- If you are on Angular 6
    })
    export class FbService {
        constructor() {
            firebase.initializeApp(environment.firebase);
        }
    }