如何解决使用Angular-CLI和RC.4与AngularFire 2和Firebase 3时无法找到模块'angularfire2'

时间:2016-07-31 05:51:42

标签: angular angularfire2

我正在使用最新的Angular RC4版本的angular-cli。

我正在执行here步骤。

但我必须做一些非常小的改动。首先,我用这种方式安装AngularFire:     npm install git+https://github.com/angular/angularfire2.git --save以便我有一个与RC4兼容的版本。

其次,在做打字步骤时,我这样做:     typings install file:node_modules/firebase/firebase.d.ts --save --global && typings install因为现在看来就是firebase.d.ts文件的位置。

接下来我这样做:

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

/** User packages configuration. */

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

我使用.ts文件,因为node_modules / angularfire2文件夹中没有angularfire2的.js文件。即使在源文件夹中,它也只是.ts文件。

所以,一旦我进入第7步,并执行此操作:

import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
一切都崩溃了。我不知道为什么,它应该有用吗?

here's the project on github

更新:

所以,我尝试在system-config.ts中将扩展名从.ts更改为.js。

然后,我尝试了以下内容:

➜ 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

然而,结果是(再次):

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)

我只是真的愚蠢而且错过了一步吗?我觉得我是。 。 。这将是一个显而易见的事情,我要么不知道,要么完全被忽视。 :(

2 个答案:

答案 0 :(得分:1)

对于firebase,你的打字应该是这样的:

SELECT DISTINCT(t1.col) 
FROM tab1 as t1 
    INNER JOIN (
        SELECT DISTINCT(col) 
        FROM tab0 WHERE id>55 AND id<320
    ) AS t0o ON t1.col = t0o.col 
WHERE t1.id>71 AND t1.id<5073

您的"dependencies": { "es6-promise": "github:typed-typings/npm-es6-promise#fb04188767acfec1defd054fc8024fafa5cd4de7", "firebase": "github:typed-typings/npm-firebase" }, 应该为AngularFire2提供此功能。它适用于Angular 2 RC.4:

package.json

使用"angularfire2": "2.0.0-beta.2",可以获得npm版本npm install -g npm,由于对等项依赖项不是Angular 2 RC.2,因此不会失败。

看起来你的repo是私有的,因为链接是404.所以我无法真正测试它或看到你遇到的确切问题,但希望这会有所帮助。

答案 1 :(得分:0)

  1. 从node_modules删除firebase和angularefire2文件夹
  2. 在Package.json中,将您的angularfire2和firebase依赖项更改如下:

    Package.json

  3. npm install

  4. ng服务

一个更简单的解决方案是更改import语句以导入不推荐使用的模块,所以代替:

从“ angularfire2 /数据库”导入{AngularFireDatabase};

使用此:

从'angularfire2 / database-deprecated'导入{AngularFireDatabase};

这将解决订阅错误,而无需更改package.json或删除任何内容。