Angularfire: Can't get Firebase and Angularfire to work with Ionic 2
Hello guys,
I'm working on Windows 7. I have a fresh Ionic 2 app here, and when trying to include Firebase and Angularfire I have multiple errors. I have read https://github.com/angular/angularfire2/issues/438 and added the dependencies accordingly. Trying to follow the tutorial at Pluralsight Here are the commands I type and their respective errors :
npm install [email protected] && firebase --save
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- [email protected]
`-- UNMET PEER DEPENDENCY firebase@^3.0.3
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of firebase@^3.0.3 but none was installed.
npm WARN myappname@ No repository field.
npm WARN myappname@ No license field.
'firebase' is not recognized as an internal or external command, operable program, or batch file.
I thought that && was strange so I tried :
npm install firebase --save
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | +-- [email protected]
| | | | | `-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
`-- [email protected]
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN myappname@ No repository field.
npm WARN myappname@ No license field.
I guess something is already wrong, but Iread on the previously linked issue that warnings could be ignored so I proceed :
typings install --save firebase
No issue in the console. I proceed to add in app.ts
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
Nothing more, let's check if it works (but we know it won't, right ?). Then :
ionic serve
Which compiles the code and serve it in the browser. Here is the console output :
Running 'serve:before' gulp task before serve
[19:23:57] Starting 'clean'...
[19:23:57] Finished 'clean' after 45 ms
[19:23:57] Starting 'watch'...
[19:23:57] Starting 'sass'...
[19:23:57] Starting 'html'...
[19:23:57] Starting 'fonts'...
[19:23:57] Starting 'scripts'...
[19:23:58] Finished 'html' after 161 ms
[19:23:58] Finished 'scripts' after 269 ms
[19:23:58] Finished 'fonts' after 344 ms
[19:24:00] Finished 'sass' after 2.48 s
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/database/database.d.ts(9,29): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/database/database.d.ts(10,31): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(15,40): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(16,52): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(16,92): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(17,51): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(17,119): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth.d.ts(20,56): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth_backend.d.ts(6,82): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth_backend.d.ts(8,49): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth_backend.d.ts(13,46): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth_backend.d.ts(41,11): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/providers/auth_backend.d.ts(61,55): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_factory.d.ts(5,74): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_factory.d.ts(5,104): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(6,23): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(7,26): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(8,26): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(9,35): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(15,50): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(15,80): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(17,11): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(17,41): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(18,23): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(18,53): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(20,21): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(21,53): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(22,39): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_list_observable.d.ts(23,83): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_object_factory.d.ts(4,76): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_object_observable.d.ts(7,102): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_object_observable.d.ts(9,22): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_object_observable.d.ts(10,28): Error TS2503: Cannot find namespace 'firebase'.
TypeScript error: C:/pathToMyApp/node_modules/angularfire2/utils/firebase_object_observable.d.ts(11,15): Error TS2503: Cannot find namespace 'firebase'.
[19:24:07] Finished 'watch' after 9.35 s
[19:24:07] Starting 'serve:before'...
[19:24:07] Finished 'serve:before' after 7.62 碌s
I would really appreciate any help to understand what's going on and what could I do to solve it.
Thanks !
JB
JerryBels
All 8 comments
Hi,
What is your ionic version ?
ionic info
sferey-old
on 26 Aug 2016
That works for me:
Create project:
ionic start AngularFire2POC blank --v2
Add that to dependencies in package.json
"angularfire2": "2.0.0-beta.2",
"firebase": "3.2.0",
Install Firebase:
npm install
npm install typings -g
typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
typings install
Add that in app.ts
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
ionicBootstrap(MyApp, [FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxx.firebaseio.com",
storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
})]);
Include Firebase in home.ts:
import {AngularFire, FirebaseListObservable} from 'angularfire2';
Use Firebase in home.ts:
items: FirebaseListObservable<Any[]>;
constructor(public navCtrl: NavController, private af: AngularFire) {
}
getItems() {
this.items = this.af.database.list('/items');
}
Add Android platform:
ionic platform add android
Generate Android app:
ionic build android
Good Luck!
alejandrocao
on 26 Aug 2016
👍2
🎉1
Hey guys !
@sferey here it is, last version :
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 7 SP1
Node Version: v4.2.2
@alejandrocao it works indeed ! The difference between what you did and what I tried is mostly adding the packages to dependencies list and installing from there, if I'm not wrong. Do you have any idea why the way I tried didn't worked ?
Thanks a lot anyway !
JerryBels
on 26 Aug 2016
@JerryBels
You are installing the Firebase types from typings, which will not work:
typings install --save firebase
@alejandrocao is installing from the manual_typings folder, which is valid for the beta2 release, but not anymore.
typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
davideast
on 26 Aug 2016
@davideast That's clearing things, thanks. But I have one more little point : you say it's not a valid way anymore. When I will want to upgrade, what will be the valid way to install ?
JerryBels
on 26 Aug 2016
@JerryBels When Ionic upgrades to RC5 or greater. The key reason is supporting @NgModule.
davideast
on 26 Aug 2016
@davideast yes, I get that, that's why we have to wait for them to move. But the question is, when I want to get the last release, you stated that it will not be possible to install from the manual_typings folder. What will be the proper way then ?
JerryBels
on 26 Aug 2016
@davideast, to clarify:
For now, while the RC5 is not available, the installation should be made from the manual_typings folder.
typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
When RC5 becomes available, the installation should be made from typings.
typings install --save firebase
That's right?
alejandrocao
on 26 Aug 2016
👍2
Was this page helpful?
0 / 5 - 0 ratings
Related issues
KLiFF2606
路
3Comments
cre8
路
3Comments
jteplitz
路
3Comments
Maistho
路
3Comments
StephenFluin
路
3Comments
Most helpful comment
That works for me:
Create project:
Add that to dependencies in package.json
Install Firebase:
Add that in app.ts
Include Firebase in home.ts:
Use Firebase in home.ts:
Add Android platform:
Generate Android app:
Good Luck!