Angularfire: Cannot import and use firebase.

[5amfung]

I need to access firebase directly as well as using angularfire2. I wonder if someone could give a helping hand as I struggle to import and use Firebase even though I follow the installing third party library guide to import Firebase. Here's what I have. Essentially I followed installation and setup.

In system-config.ts, I have this:

const map: any = {
    'firebase': 'vendor/firebase'
};

/** User packages configuration. */
const packages: any = {
    'firebase': { main: 'firebase.js' }
};

In angular-cli-build.js, I have this:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',

      // Add below this line.
      'firebase/**/*.+(js|js.map)'
    ]
  });
};

In my code, I try

import * as firebase from 'firebase';

var auth = firebase.auth();

When auth() is called, I got the following error:

Error: Typescript found the following errors:
  /Users/bbpan/src/learn-vocab/tmp/broccoli_type_script_compiler-input_base_path-tG8QW8xT.tmp/0/src/app/shared/auth.service.ts (12, 29): Property 'auth' does not exist on type 'FirebaseStatic'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:5)
    at Angular2App._getTsTree (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
    at Angular2App._buildTree (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
    at new Angular2App (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/bbpan/src/learn-vocab/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/lib/models/builder.js:89:10)
    at new Class (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/lib/tasks/serve.js:15:19)
    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

When I console.log(firebase), auth is a function.

[5amfung]

Also in tsconfig.json, I have:

"files": [
    "main.ts",
    "typings.d.ts",
    "node_modules/angularfire2/firebase3.d.ts"
  ]

[ivoviz]

@5amfung As a workaround (since I've had the same issue as well) you could just simply copy firebase3.d.ts into your src directory and in tsconfig simply add "firebase3.d.ts". That's the only way I could make it work within a cli project, every other suggestion failed for me.

[samirthebti]

Try to replace

import * as firebase from 'firebase';

with

declare var firebase:any;

[5amfung]

Thank you all for the suggestions.

@ivoviz I tried to copy firebase3.d.ts to src but I got the same error before.
@samirthebti Your suggestion works. It does the trick of forcing reference to the global firebase object, I guess.

[5amfung]

I've tried many solutions. Only this https://github.com/typings/registry/issues/123#issuecomment-230117266 works seamlessly.

Just run typings install github:typed-typings/npm-firebase && typings install and that's it. No need to mess with any other files.

[davideast]

You are missing two parts of your setup.

First, you need to include the defaultExtension key in the SystemJS setup, which is specified in the quickstart.

Second, you are using the wrong glob for the firebase entry in the CLI build, use 'firebase/*.js' instead.