Search code examples
angularangularfire2

How to resolve Cannot find module 'angularfire2' when using Angular-CLI and RC.4 with AngularFire 2 and Firebase 3


I'm using angular-cli with the lastest RC4 version of Angular.

I was following the steps here.

But I had to make a few very small changes. For one, I'm installing AngularFire this way: npm install git+https://github.com/angular/angularfire2.git --save so that I have a version that is compatible with RC4.

Secondly, when doing the typings step I do this: typings install file:node_modules/firebase/firebase.d.ts --save --global && typings install because that's where the firebase.d.ts file is now it seems.

Next I do this:

var map = {
    'firebase': 'vendor/firebase/firebase.js',
    'angularfire2': 'vendor/angularfire2'
};

/** User packages configuration. */

var packages = {
    angularfire2: {
        defaultExtension: 'ts',
        main: 'angularfire2.ts'
    }
};

Where I use the .ts file because there isn't a .js file for angularfire2 in the node_modules/angularfire2 folder. Even in the source folder it's just .ts files.

So, once I get to step 7, and do this:

import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';

everything falls apart. I'm not sure why, it should work?

here's the project on github

UPDATE:

So, I tried changing the extension from .ts to .js in system-config.ts.

Then, I tried the following:

➜ Projects rm -rf angular-analytics 
➜ Projects npm uninstall -g angular-cli
➜ Projects npm cache clean
➜ Projects npm install -g angular-cli@latest
➜ Projects git clone git@github.com:thehashrocket/angular-analytics.git
➜ Projects cd angular-analytics 
➜ angular-analytics git:(master) npm install
➜ angular-analytics git:(master) ng build

However, the result was this (again):

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/jasonshultz/Projects/angular-analytics/tmp/broccoli_type_script_compiler-input_base_path-89eNuVcv.tmp/0/src/main.ts (4, 53): Cannot find module 'angularfire2'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/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/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/angular2-app.js:331:18)
    at Angular2App._buildTree (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
    at new Angular2App (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/jasonshultz/Projects/angular-analytics/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/jasonshultz/Projects/angular-analytics/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

Am I just being really dumb and missing a step? I feel like I am . . . It's going to be something obvious that I either didn't know about, or completely overlooked. :(


Solution

  • Your typings should look like this for firebase:

    "dependencies": {
      "es6-promise": "github:typed-typings/npm-es6-promise#fb04188767acfec1defd054fc8024fafa5cd4de7",
      "firebase": "github:typed-typings/npm-firebase"
    },
    

    Your package.json should have this for AngularFire2. It works fine with Angular 2 RC.4:

    "angularfire2": "2.0.0-beta.2",

    Using npm install -g npm should get you npm version 3.10.5 which will not fail due to the peer dependencies not being Angular 2 RC.2.

    It looks like your repo is private since the link is a 404. So I can't really test this out or see the exact problem you are having, but hopefully this helps.