title: Using GeoFire in an Angular2 App
body: <p>I'm trying to set up GeoFire in my Angular2 (RC5) app. I've installed geofire and firebase with npm and configured systemjs to import it. Here's my package.json:</p>
  
  <pre><code>{
    "name": "MyProject",
    "version": "0.1.0",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
    },
    "license": "ISC",
    "dependencies": {
      "@angular/common": "^2.0.0-rc.5",
      "@angular/compiler": "^2.0.0-rc.5",
      "@angular/core": "^2.0.0-rc.5",
      "@angular/forms": "0.3.0",
      "@angular/http": "2.0.0-rc.5",
      "@angular/platform-browser": "^2.0.0-rc.5",
      "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
      "@angular/router": "3.0.0-rc.1",
      "@angular/router-deprecated": "2.0.0-rc.2",
      "@angular/upgrade": "2.0.0-rc.5",
      "angular2-in-memory-web-api": "0.0.15",
      "bootstrap": "^3.3.6",
      "core-js": "^2.4.0",
      "firebase": "^3.3.0",
      "geofire": "^4.1.1",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "systemjs": "0.19.27",
      "zone.js": "^0.6.12"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "typescript": "^1.8.10",
      "typings": "^1.0.4"
    }
  }
  </code></pre>
  
  <p>and my systemjs config file:</p>
  
  <pre><code>  var map = {
      'app':                        'app', // 'dist',
      '@angular':                   'node_modules/@angular',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs':                       'node_modules/rxjs',
      'firebase':                   'node_modules/firebase',
      'geofire':                    'node_modules/geofire',
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app':                        { main: 'main.js',  defaultExtension: 'js' },
      'rxjs':                       { defaultExtension: 'js' },
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      'firebase':                   { main: 'firebase.js', defaultExtension: 'js' },
      'geofire':                    { main: 'dist/geofire.js', defaultExtension: 'js' },
    };
  </code></pre>
  
  <p>Finally I try to import geofire in my app.component.ts file like so:</p>
  
  <pre><code>import * as GeoFire from "geofire";
  </code></pre>
  
  <p>But on running npm start to transpile and launch the server, get the following error:</p>
  
  <pre><code>➜  MyProject npm start
  
  &gt; MyProject@0.1.0 start /Users/max/Development/myproject
  &gt; tsc &amp;&amp; concurrently "npm run tsc:w" "npm run lite"
  
  app/app.component.ts(3,26): error TS2307: Cannot find module 'geofire'.
  
  npm ERR! Darwin 15.5.0
  npm ERR! argv "/usr/local/Cellar/node/5.10.1/bin/node" "/usr/local/bin/npm" "start"
  npm ERR! node v5.10.1
  npm ERR! npm  v3.8.3
  npm ERR! code ELIFECYCLE
  npm ERR! MyProject@0.1.0 start: `tsc &amp;&amp; concurrently "npm run tsc:w" "npm run lite" `
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the MyProject@0.1.0 start script 'tsc &amp;&amp; concurrently "npm run tsc:w" "npm run lite" '.
  npm ERR! Make sure you have the latest version of node.js and npm installed.
  npm ERR! If you do, this is most likely a problem with the MyProject package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR!     tsc &amp;&amp; concurrently "npm run tsc:w" "npm run lite"
  npm ERR! You can get information on how to open an issue for this project with:
  npm ERR!     npm bugs MyProject
  npm ERR! Or if that isn't available, you can get their info via:
  npm ERR!     npm owner ls MyProject
  npm ERR! There is likely additional logging output above.
  
  npm ERR! Please include the following file with any support request:
  npm ERR!     /Users/max/Development/MyProject/npm-debug.log
  </code></pre>
  
  <p>Here's my tsconfig:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    }
  }
  </code></pre>
  
  <p>The rest of the project files are based on the angular2 quickstart found here:</p>
  
  <p><a href="https://angular.io/guide/quickstart" rel="nofollow noreferrer">https://angular.io/guide/quickstart</a></p>
  
  <p>Does anybody have any idea how I can get tsc to find the module and successfully transpile?</p>
  
  <p>Thanks. Max.</p>