René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Cannot import Firebase into the project.","articleBody":"\u003e ## Please provide us with the following information:\n\u003e 1. OS?  Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)\n\nMac OSX El Capitan\n1. Versions. Please run `ng --version`. If there's nothing outputted, please\n   run in a Terminal: \n       node --version\n   And paste the result here.\n\nv6.2.0\n1. Repro steps. Was this an app that wasn't created using the CLI? What change did you\n   do on your code? etc.\n\nI couldn't get Firebase working even though I follow the installing third party library guide to import Firebase.  Here's what I have.\n\nInstall Firebase first.\n\n```\n$ npm install --save firebase\n```\n\nIn `system-config.ts`, I have this:\n\n```\nconst map: any = {\n    'firebase': 'vendor/firebase'\n};\n\n/** User packages configuration. */\nconst packages: any = {\n    'firebase': { main: 'firebase.js' }\n};\n```\n\nIn `angular-cli-build.js`, I have this:\n\n```\nmodule.exports = function(defaults) {\n  return new Angular2App(defaults, {\n    vendorNpmFiles: [\n      'systemjs/dist/system-polyfills.js',\n      'systemjs/dist/system.src.js',\n      'zone.js/dist/**/*.+(js|js.map)',\n      'es6-shim/es6-shim.js',\n      'reflect-metadata/**/*.+(ts|js|js.map)',\n      'rxjs/**/*.+(js|js.map)',\n      '@angular/**/*.+(js|js.map)',\n\n      // Add below this line.\n      'firebase/**/*.+(js|js.map)'\n    ]\n  });\n};\n```\n\nIn my code, I try\n\n```\nimport * as firebase from 'firebase';\n\nvar auth = firebase.auth();\n```\n\nWhen `auth()` is called, I got the following error:\n\n```\nError: Typescript found the following errors:\n  /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'.\n    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)\n    at BroccoliTypeScriptCompiler.build (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)\n    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21\n    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)\n    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)\n    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)\n    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)\n    at _combinedTickCallback (internal/process/next_tick.js:67:7)\n    at process._tickCallback (internal/process/next_tick.js:98:9)\n\nThe broccoli plugin was instantiated at: \n    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)\n    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)\n    at BroccoliTypeScriptCompiler (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:5)\n    at Angular2App._getTsTree (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)\n    at Angular2App._buildTree (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)\n    at new Angular2App (/Users/bbpan/src/learn-vocab/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)\n    at module.exports (/Users/bbpan/src/learn-vocab/angular-cli-build.js:10:10)\n    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)\n    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)\n    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)\n    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)\n    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/lib/commands/serve.js:64:24\n    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)\n    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)\n    at /Users/bbpan/src/learn-vocab/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:331:11\n    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)\n```\n\nWhen I `console.log(firebase)`, `auth` is a function.\n\n![image](https://cloud.githubusercontent.com/assets/371691/16542244/c7913eea-4055-11e6-852c-940c96e696c8.png)\n1. The log given by the failure. Normally this include a stack trace and some\n   more information.\n2. Mention any other details that might be useful.\n   \n   \u003e ---\n   \u003e \n   \u003e \u003e Thanks! We'll be in touch soon.\n","author":{"url":"https://github.com/5amfung","@type":"Person","name":"5amfung"},"datePublished":"2016-07-02T19:59:51.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4},"url":"https://github.com/1271/angular-cli/issues/1271"}