Failed to instantiate firebase module

Question

I've recently installed firebase via npm but when i try to import it and set it as a dependency to my app module I get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app-bootstrap due to: Error: [$injector:modulerr] Failed to instantiate module firebase due to: Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I'm using import "firebase" in my main.js file. Every other import works except for firebase.

What could be the issue ?

main.js :

import 'angular';
import 'angular-ui-router';
import 'angular-animate';
import * as firebase from 'firebase';
import 'angularfire';

// Libs wrapper

import 'assets/css/main.scss'

// Module wrapper
import 'modules';

let config = {
     apiKey: "",
     authDomain: "",
     databaseURL: "",
     projectId: "",
     storageBucket: "",
}
     firebase.initializeApp(config);

angular
  .module('app-bootstrap', [
    'ui.router',
    'ngAnimate',
    'firebase',
    'modules'
  ])


angular.element(document).ready(function() {
  angular.bootstrap(document, ['app-bootstrap']);
});

Random controller:

export function authCtrl($firebaseAuth) {
    let vm = this;
    vm.authObj = $firebaseAuth();


}

Later edit:

I managed to solve the Uncaught Error and now I get a different error "ReferenceError: firebase is not defined"

AngularFire (or AngularFire2) are built to help work with Firebase in Angular applications. The steps in the documentation (github.com/firebase/angularfire or github.com/angular/angularfire2) should help get you going. You can also follow the instructions to run a local copy for development. — Steven Scott
Did read the documentation before attempting to install. I also have angularfire installed via npm but as I said in the beggining, it gives me that error. — As above so below
Best results are to normally show your code and what you have tried so people can see what you are attempting, so that they can try to help your specific example. — Steven Scott
You likely want to mask the key etc.. so people do not abuse your firebase account limits. — Steven Scott

Steven Scott Steven Scott · Accepted Answer · 2017-06-15T19:27:13

In my environment I just use AngularFire2, and not Firebase directly.

...
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
...
@NgModule({
...
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(Configuration.Firebase),
        AngularFireAuthModule,
        AngularFireDatabaseModule
    ],

... }) export class AppModule {}

Then, in classes needing the AngularFire2 access, you pass it as a dependency on the constructor:

export class SomeClass {
    DataForPage: FirebaseListObservable<any[]>;

    constructor(public navCtrl: NavController, FirebaseData: AngularFireDatabase ) {
    this.DataForPage = FirebaseData.list('/data');
}
...

Or

constructor(public navCtrl: NavController, FirebaseData: AngularFireDatabase, Auth:AngularFireAuthModule ) {

Failed to instantiate firebase module

1 Answers