Firebase is not a constructor

Question

I am trying to integrate Firebase into my Angular 2 app but I keep getting this error that Firebase is not a constructor. Following is what I did:

Installed firebase using bower
Referenced the script in index.html.
Install firebase ambient typings
Created a Firebase service
Provided it through bootstrap()
Had it injected in a component

FirebaseService.ts

@Injectable()
export class FirebaseService
{
    dataRef: Firebase;
    constructor() {
        this.dataRef = new Firebase('https://boiling-inferno-1117.firebaseio.com/votes');
    }
}

boot.ts

bootstrap(App, [HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    IdentityService, 
    ApiService, 
    UrlService, 
    provide(FirebaseService, {useValue: new FirebaseService()})
])
.catch(err => console.error(err));

app.ts

@Component({
    selector: 'app',
    templateUrl: 'app/app.html',
    directives: [AuthRouterOutlet, ROUTER_DIRECTIVES]
})
export class App {        
    constructor(private firebase:FirebaseService)
    {

    }        
}

Systemjs config:

System.config({
    defaultJSExtensions: true,
    map: {
        'jquery': 'vendors/js/jquery',
        'firebase': 'vendors/js/firebase'
    },
    packages: {
        angular2: { defaultExtension: false },
        rxjs: { defaultExtension: false }
    }
});

and importing Firebase like below:

import * as Firebase from 'firebase';

Any suggestion on what I can do to resolve this situation is greatly appreciated.

Can we assume that this: provide(FirebaseService, {useValue: new FirebaseService()}) is a typo? Because you should be using providers and it take an array afterward. providers : [FirebaseService] — R. Richards
– R. Richards, Commented Apr 24, 2016 at 14:35
Could you also provide your SystemJS configuration? And the way you import the Firebase class? Thanks! — Thierry Templier
– Thierry Templier, Commented Apr 24, 2016 at 14:36

Thierry Templier · Accepted Answer · 2016-04-24 17:32:34Z

1

I would configure Firebase this way:

System.config({
  map: {
    firebase: '/node_modules/firebase/lib/firebase-web.js',
    (...)
  },
  (...)
});

and import it like this in the TypeScript file:

import * as Firebase from 'firebase';

See the doc of Angularfire2 for more details:

https://github.com/angular/angularfire2

answered Apr 24, 2016 at 17:32

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lbrahim Over a year ago

I have a gulp task that copies the firebase-web.js file from node_modules folder into my dist/vendors/js directory. So it seems its essentially the same as what you showed. Am I wrong?

Thierry Templier Over a year ago

In fact you specify the folder not the js file into your SystemJS configuration ;-) You need to map the js file.

lbrahim Over a year ago

vendors/js/firebase here firebase is the file name like firebase.js. Since, I have defaultJSExtensions: true enabled .js seems to be appended for me. That is why jquery from my config works just fine.

Collectives™ on Stack Overflow

Firebase is not a constructor

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related