CODEWITHSUNDEEP
angularfirebasesystemjs
James B
James B

Reputation: 9605

Angular 2 and Firebase SDK

I've been trying to get the Angular2 quickstart app to work with Firebase (see this repository). I've installed the latest version of Firebase, attempted to load firebase using SystemJS (see systemjs.config.js) and tried importing firebase and using the function initializeApp (see app.component.ts). However, I keep getting the error firebase.initializeApp is not a function in the browser console. Am I using SystemJS correctly to load firebase.js?

Note: To replicate the error, you should just be able to do npm install followed by npm start.

Upvotes: 4

Views: 769

Answers (2)

cartant
cartant

Reputation: 58410

There is a workaround for this issue here and, with it, I was able to get a plunk working with the latest versions of Firebase (3.6.7) and AngularFire2 (2.0.0-beta.7).

How it works, I have no idea, as I only use SystemJS with Plunker, but it involves replacing this:

firebase: {
    main: 'firebase.js'
}

with this:

firebase: {
    defaultExtension: 'js',
    main: './firebase-browser.js'
}

in the packages property of the configuration that's passed to System.config.

Upvotes: 0

artem
artem

Reputation: 51649

One change: from

import * as firebase from 'firebase';

to

import {firebase} from 'firebase';

is enough to make your example work with firebase 3.6.

However, I'd say it's working by accident. firebase.js does not look like a module at all, it does not use module.exports or amd define, it just creates global variable firebase with the following properties:

INTERNAL: Object
Promise: Promise()
SDK_VERSION: "3.6.4"
User: (a, b, c)
__esModule: true
app: a(a)
apps: (...)
get apps: ()
auth: (c)
database: (c)
default: Object
initializeApp: (a, c)
messaging: (c)
storage: (c)
__proto__: Object

Probably, it's the presence of __esModule that makes SystemJS to wrap it in another object - if you look in the debugger at the result of import * as firebase from 'firebase' it contains single property also named firebase which is the actual module that you need.

Interestingly, the firebase.d.ts is written in such a way that

import {firebase} from 'firebase'; 

firebase.initializeApp(...);

works, but seemingly equvalent

import * as firebase from 'firebase';

firebase.firebase.initializeApp(...);

does not typecheck.

Upvotes: 5

Related Questions