Installation steps for ionic 2 and angularfire2

melinda · July 11, 2016, 8:41am

After much struggling as a newbie to integrate AngularFire2 into an ionic2 project, I finally got it going with the help of various sources on the web. For those who are planning to use AngularFire2 into their ionic2 project, here are the steps that I use which got it working. Hope this helps some people to shorten their creation lifecycle.

Step 1: create ionic blank project

ionic start blank —v2

Step 2: install angularfire2 and firebase

npm install angularfire2 firebase —save

Step 3: reference the Firebase 3 typings file that is included in the angularfire2 node package directly in your typings.json.

typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
this saves the reference into typings.json
NOTE: requires typings v.1+

typings install
this puts the typings files in the typings/ directory.

ionic info

Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.0.0
Xcode version: Xcode 7.3.1 Build version 7D1014

fritters · July 12, 2016, 3:29pm

Hi Melinda

i got this message when I try to install angularfire2 and firebase. Any hint on that ??

[~/ionicdev/xxx]: frank$ npm install angularfire2 firebase --save
xxx@ /Users/frank/ionicdev/xxx
├── UNMET PEER DEPENDENCY @angular/common@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/compiler@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/core@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/platform-browser@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/platform-browser-dynamic@2.0.0-rc.3
├── angularfire2@2.0.0-beta.2
└─┬ firebase@3.1.0
├─┬ faye-websocket@0.9.3
│ └─┬ websocket-driver@0.6.4
│ └── websocket-extensions@0.1.1
├─┬ jsonwebtoken@5.7.0
│ ├─┬ jws@3.1.3
│ │ ├─┬ base64url@1.0.6
│ │ │ ├─┬ concat-stream@1.4.10
│ │ │ │ ├── inherits@2.0.1
│ │ │ │ ├─┬ readable-stream@1.1.14
│ │ │ │ │ ├── core-util-is@1.0.2
│ │ │ │ │ ├── isarray@0.0.1
│ │ │ │ │ └── string_decoder@0.10.31
│ │ │ │ └── typedarray@0.0.6
│ │ │ └─┬ meow@2.0.0
│ │ │ ├─┬ camelcase-keys@1.0.0
│ │ │ │ ├── camelcase@1.2.1
│ │ │ │ └── map-obj@1.0.1
│ │ │ ├─┬ indent-string@1.2.2
│ │ │ │ ├── get-stdin@4.0.1
│ │ │ │ └─┬ repeating@1.1.3
│ │ │ │ └─┬ is-finite@1.0.1
│ │ │ │ └── number-is-nan@1.0.0
│ │ │ ├── minimist@1.2.0
│ │ │ └── object-assign@1.0.0
│ │ └─┬ jwa@1.1.3
│ │ ├── buffer-equal-constant-time@1.0.1
│ │ └─┬ ecdsa-sig-formatter@1.0.5
│ │ └── base64-url@1.2.2
│ ├── ms@0.7.1
│ └── xtend@4.0.1
└── rsvp@3.2.1

npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/core@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/platform-browser@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/common@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/compiler@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/platform-browser-dynamic@2.0.0-rc.2 but none was installed.
npm WARN xxx@ No repository field.
npm WARN xxx@ No license field.

this is my ionic info

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3.1 Build version 7D1014

melinda · July 13, 2016, 4:22am

The message looks like some of the required packages have not been installed. If you created your ionic 2 project using step 1, all the required packages should have been installed automatically for you by the ionic 2 cli. As mention I am new to this as well. So all I can suggest is try:

a) do an “npm install” in your project directory. Hopefully this will reinstall all the angular package listed in your project package.json file.

b) Redo step 2 again.

You might also want to take a look at this answer I saw on stackoverflow.

solve unmet peer dependency

melinda · July 13, 2016, 4:39am

@fritters, ignore my last message…I created a test ionic 2 project with angularfire2 and firebase installed just to see if I got the same message that you posted. Yes, it’s the same message. You can safely ignore those message. The project will still run fine as I am already working on an existing project with an angularfire2 and firebase.

So bottom line just ignore the message and carry on with your newly created project.

fritters · July 13, 2016, 7:41am

ok cool tx you for the response I’ll check.

Melinda mailto:ionicframework@discoursemail.com
13. Juli 2016 um 06:49
[melinda] melinda http://forum.ionicframework.com/users/melinda
July 13

@fritters http://forum.ionicframework.com/users/fritters, ignore my
last message…I created a test ionic 2 project with angularfire2 and
firebase installed just to see if I got the same message that you
posted. Yes, it’s the same message. You can safely ignore those
message. The project will still run fine as I am already working on an
existing project with an angularfire2 and firebase.

So bottom line just ignore the message and carry on with your newly
created project.

Visit Topic
http://forum.ionicframework.com/t/installation-steps-for-ionic-2-and-angularfire2/57152/4
or reply to this email to respond.
    In Reply To
[melinda] melinda http://forum.ionicframework.com/users/melinda
July 13

The message looks like some of the required packages have not been
installed. If you created your ionic 2 project using step 1, all the
required packages should have been installed automatically for you by
the ionic 2 cli. As mention I am new to this as well. So all I can
suggest is try: a) do an …

Visit Topic
http://forum.ionicframework.com/t/installation-steps-for-ionic-2-and-angularfire2/57152/4
or reply to this email to respond.

To unsubscribe from these emails, click here
http://forum.ionicframework.com/email/unsubscribe/9fdcc30c5cb79f0f283fa2a83c71db4d0fff6cd68db2ab62e238433794bbecc2.

Solutionware AG
Frank Rittershofer
Birsstrasse 42
4052 Basel

Mobil: +41 79 448 74 01
Telefon: +41 61 561 74 77

gigocabrera · August 3, 2016, 4:47pm

For anybody else following these instructions

Step 2: Should be as follows

npm install angularfire2 && firebase --save

Great guide @melinda, thanks for sharing

Sumeet123 · September 27, 2016, 7:05am

@melinda

There was no /firebase3.d.ts in node_modules/angularfire2

node_modules/firebase has firebase.d.ts

I followed above steps and I get following errors :-

TypeScript error: typings/globals/firebase/index.d.ts(42,38): Error TS1110: Type expected.
TypeScript error: typings/globals/firebase/index.d.ts(42,42): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(43,30): Error TS1005: ',' expected.
TypeScript error: typings/globals/firebase/index.d.ts(43,61): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(44,30): Error TS1005: '(' expected.
TypeScript error: typings/globals/firebase/index.d.ts(46,13): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(46,36): Error TS1005: '(' expected.

TypeScript error: typings/globals/firebase/index.d.ts(47,28): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(47,51): Error TS1005: '(' expected.
TypeScript error: typings/globals/firebase/index.d.ts(48,22): Error TS1005: ',' expected.
TypeScript error: typings/globals/firebase/index.d.ts(48,31): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(48,54): Error TS1005: '(' expected.
TypeScript error: typings/globals/firebase/index.d.ts(49,25): Error TS1005: ',' expected.
TypeScript error: typings/globals/firebase/index.d.ts(49,34): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(49,57): Error TS1005: '(' expected.
TypeScript error: typings/globals/firebase/index.d.ts(50,31): Error TS1005: ',' expected.
TypeScript error: typings/globals/firebase/index.d.ts(50,40): Error TS1005: ';' expected.
TypeScript error: typings/globals/firebase/index.d.ts(50,63): Error TS1005: '(' expected.

Is this guide outdated ?

melinda · September 27, 2016, 7:48am

@Sumeet123,

I have not touch ionic or angularfire2 since I last wrote this guide in July, so I am not sure if there may have been updates on angularfire2 which may have broken the install steps.

Sorry for not being able to assist any further.

Sumeet123 · September 27, 2016, 8:25am

Done. Used older version of angularfire2. Thanks , for quick reply.