Angular 2 and Firebase SDK

Question

I am trying to get an Angular2 quickstart application for working with Firebase (see this repository ). I installed the latest version of Firebase, tried to load firebase using SystemJS (see systemjs.config.js ) and tried to import firebase and use the function initializeApp(see app.component.ts ). However, I keep getting the error firebase.initializeApp is not a functionin the browser console. Am I using SystemJS to boot correctly firebase.js?

Note. To replicate the error, you just have to execute npm installand then npm start.

Answer 1

One change: from

import * as firebase from 'firebase';

to

import {firebase} from 'firebase';

enough for your example to work with firebase 3.6.

However, I would say that this works by chance. firebase.jsnot like a module at all, it does not use module.exportsor amd define, it just creates a global variable firebasewith 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

Perhaps this is the presence __esModulethat causes SystemJS to wrap it in another object - if you look in the debugger as a result import * as firebase from 'firebase', it contains one property, also called firebase, which is the actual module that you need.

Interestingly, it is firebase.d.tswritten in such a way that

import {firebase} from 'firebase'; 

firebase.initializeApp(...);

works, but seemingly equivalent

import * as firebase from 'firebase';

firebase.firebase.initializeApp(...);

not checked typecheck.

Answer 2

, , Firebase (3.6.7) AngularFire2 (2.0.0-beta.7).

, , SystemJS Plunker, :

firebase: {
    main: 'firebase.js'
}

:

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

packages , System.config.