如何解决在使用 Angular-CLI 和 RC.4 以及 AngularFire 2 和 Firebase 3 时找不到模块 'angularfire2'
How to resolve Cannot find module 'angularfire2' when using Angular-CLI and RC.4 with AngularFire 2 and Firebase 3
我正在使用 angular-cli 和最新的 Angular RC4 版本。
我正在按照步骤 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';
一切都崩溃了。我不确定为什么,它应该有用吗?
更新:
因此,我尝试在 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)
我是不是真的很笨,漏了一步?我觉得我是。 . .这将是一些我不知道或完全忽视的显而易见的事情。 :(
对于 firebase,您的输入应该如下所示:
"dependencies": {
"es6-promise": "github:typed-typings/npm-es6-promise#fb04188767acfec1defd054fc8024fafa5cd4de7",
"firebase": "github:typed-typings/npm-firebase"
},
你的 package.json
应该有 AngularFire2。它适用于 Angular 2 RC.4:
"angularfire2": "2.0.0-beta.2",
使用 npm install -g npm
应该会得到 npm 版本 3.10.5
,这不会因为对等依赖项不是 Angular 2 RC.2.
而失败
看起来你的回购协议是私人的,因为 link 是 404。所以我无法真正测试它或看到你遇到的确切问题,但希望这会有所帮助。
- 从 node_modules
中删除 firebase 和 angularefire2 文件夹
在 Package.json 中将您的 angularfire2 和 firebase 依赖项更改为如下所示:
Package.json
npm 安装
ng 服务
一个更简单的解决方案是更改 import 语句以导入已弃用的模块,而不是:
从'angularfire2/database'导入{AngularFireDatabase};
使用这个:
从'angularfire2/database-deprecated'导入{AngularFireDatabase};
这将解决订阅错误,无需更改 package.json 或删除任何内容。
我正在使用 angular-cli 和最新的 Angular RC4 版本。
我正在按照步骤 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';
一切都崩溃了。我不确定为什么,它应该有用吗?
更新:
因此,我尝试在 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)
我是不是真的很笨,漏了一步?我觉得我是。 . .这将是一些我不知道或完全忽视的显而易见的事情。 :(
对于 firebase,您的输入应该如下所示:
"dependencies": {
"es6-promise": "github:typed-typings/npm-es6-promise#fb04188767acfec1defd054fc8024fafa5cd4de7",
"firebase": "github:typed-typings/npm-firebase"
},
你的 package.json
应该有 AngularFire2。它适用于 Angular 2 RC.4:
"angularfire2": "2.0.0-beta.2",
使用 npm install -g npm
应该会得到 npm 版本 3.10.5
,这不会因为对等依赖项不是 Angular 2 RC.2.
看起来你的回购协议是私人的,因为 link 是 404。所以我无法真正测试它或看到你遇到的确切问题,但希望这会有所帮助。
- 从 node_modules 中删除 firebase 和 angularefire2 文件夹
在 Package.json 中将您的 angularfire2 和 firebase 依赖项更改为如下所示:
Package.json
npm 安装
ng 服务
一个更简单的解决方案是更改 import 语句以导入已弃用的模块,而不是:
从'angularfire2/database'导入{AngularFireDatabase};
使用这个:
从'angularfire2/database-deprecated'导入{AngularFireDatabase};
这将解决订阅错误,无需更改 package.json 或删除任何内容。