Cannot import Firebase into the project.

[5amfung]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX El Capitan

1. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.

v6.2.0

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I couldn't get Firebase working even though I follow the installing third party library guide to import Firebase. Here's what I have.

Install Firebase first.

$ npm install --save firebase

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.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

2. Mention any other details that might be useful.

   ---

   Thanks! We'll be in touch soon.

[cre8]

Try angularfire2, it worked fine for me
https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

[5amfung]

@cre8 angularfire2 works fine, but I need to access something from firebase.

[filipesilva]

This kinda like a firebase issue instead of a CLI issue. Are you sure you're following instructions that work for node/typescript?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}