Initialize Firebase In Angular 6 Without Angularfire

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

Solution 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)
    }
}

Solution 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);
        }
    }

Solution 3:

Just add firebase.initializeApp(environment.firebase); outside the module and the class, i.e:

import { environment } from '../environments/environment';
import * as firebase from 'firebase';

firebase.initializeApp(environment.firebase);

@NgModule({....

If you want to use it inside a service import firebase import * as firebase from 'firebase'; and use it as usual.