Ionic2+AngularFire2+firebase: working steps to begin


#1

Looks like dependencies have been broken with latest updates to firebase? I’m following available tutorials (e.g. http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angularjs-ionic2) to get started on a new project. But it just doesn’t seem to work.

typings install firebase --save --ambient typings ERR! message Unable to find "firebase" ("npm") in the registry.

and Error: Cannot find module '@angular/core' from .../node_modules'
and TypeScript error: project/node_modules/angularfire2/angularfire2.d.ts(1,26): Error TS2307: Cannot find module '@angular/core'. TypeScript error: project/node_modules/angularfire2/database/database.d.ts(8,29): Error TS2304: Cannot find name 'Firebase'.

Has anybody tried any new projects and been able to put it together? I hope to use the new one at a hackathon this saturday.


#2

Ionic hasn’t released a build that used Angular RC1. One of the breaking changes in RC1 was the reworking of the Angular modules. (The new new router being the other big change). You are going to have to wait for the beta bits to align again.


#3

I was planning on taking a look at this over the weekend, also if you added the comment specifically to the github repo it is better for me. Thanks


#4

Ionic seems to have released beta7 (which is updated to use Angular rc1), so you should give that a try. I’ll also be taking a look at Ionic 2 + AngularFire 2 this weekend.


#5

if you set the proper version of firebase when you do the install, you should be good to go. This is not really an Ionic version issue, it is a angularFire2, Firebase issue that needs to be resolved

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import { 
  FIREBASE_PROVIDERS, defaultFirebase, AngularFire
} from 'angularfire2';



@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}, 
  providers: [
    FIREBASE_PROVIDERS,
    defaultFirebase('https://[YOUR-APP].firebaseio.com/'),
  ],

})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform, af: AngularFire) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
    });

    af.list('/textItems')
        .subscribe((data) => console.log(data))
  }
}

this code works… just tested with latest version on AngularFire2 and Firebase@2.4.2

npm install angularfire2 && firebase@2.4.2

#6

I was able to perform a basic CRUD test last night with beta7. The one issue to be aware of AngularFire2 is not currently compatible with the latest version of Firebase. You will need to install Firebase 2.4.2 instead of the latest.


#7

thought I mentioned that in my response last night… I made it bold incase others miss it


#8

Sample has been updated - https://github.com/aaronksaunders/ionic2-angularfire-sample - please leave issue in github if you run into a problem. thanks


#9

I tried your solution (npm install angularfire && firebase@2.4.2) with the new beta 7 version. I am still getting errors. I created a brand new project called angularfire. Any advice ?

C:\Projects\angularFire>npm install angularfire && firebase@2.4.2
npm WARN package.json angularfire@ No repository field.
npm WARN package.json angularfire@ No README data
npm WARN package.json angularfire@ No license field.
npm WARN install Refusing to install angularfire as a dependency of itself
'firebase@2.4.2' is not recognized as an internal or external command,
operable program or batch file.

#10

@starkemc my bad… should be angularfire2


#11

I should have caught that ha ha. New error though. I am up to date on all my components, Any advice would be greatly appreciated.

C:\Projects\angularFire>npm install angularfire2 && firebase@2.4.2
npm WARN package.json angularfire@ No repository field.
npm WARN package.json angularfire@ No README data
npm WARN package.json angularfire@ No license field.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\\\node.exe" "C:\\Program Files (
x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "angularfire2"
npm ERR! node v0.12.5
npm ERR! npm  v2.11.2
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: angularfire2@'*'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["2.0.0-alpha.1","2.0.0-alpha.2","2.0.0-alpha.3","2.0.0-alpha.
4","2.0.0-alpha.5","2.0.0-alpha.6","2.0.0-alpha.7","2.0.0-alpha.8","2.0.0-alpha.
9","2.0.0-alpha.10","2.0.0-alpha.11","2.0.0-alpha.12","2.0.0-alpha.13","2.0.0-al
pha.14","2.0.0-alpha.15","2.0.0-alpha.16","2.0.0-alpha.17","2.0.0-beta.0","2.0.0
-beta.0-1"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'angularfire'
npm ERR! notarget

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\angularFire\npm-debug.log

#12

look at the package.json on the sample project and set the angularfire2 version, I believe it is 2.0.0-beta.0

https://github.com/aaronksaunders/ionic2-angularfire-sample/blob/master/package.json


#13

Thanks so much for your help. I will probably just take your sample project out of github and gut it if you have all the dependencies working. I tried adding the angular 2 version in my package.json file and:

C:\Projects\angularFire>npm install angularfire2 && firebase@2.4.2
npm WARN package.json angularfire@ No repository field.
npm WARN package.json angularfire@ No README data
npm WARN package.json angularfire@ No license field.
npm WARN peerDependencies The peer dependency firebase@2.4.2 included from angul
arfire2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerD
ependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it
explicitly.
firebase@2.4.2 node_modules\firebase
└── faye-websocket@0.9.3 (websocket-driver@0.5.2)

angularfire2@2.0.0-beta.0 node_modules\angularfire2
'firebase@2.4.2' is not recognized as an internal or external command,
operable program or batch file.

#14

I also used @aaronksaunders project as the base and built something on it. I couldn’t get all the versions and config to work in the short time that I had. Also, it didn’t work with a project in the new firebase console - kept giving me authentication_disabled errors. Worked ok with old console. But I didn’t do too much after that at this hackathon. Thanks for all your help.


#15

@sathishvj not sure when you used the project, but I just updated it yesterday and it will throw some warnings but the code works.

Can you be more specific with your issue? Or at least open an issue in the github repo so it can help someone else in the community out?


#16

dont forget to add the typings to remove some build errors.

typings install dt~firebase --global --save

#17

Do not try with old version it will not work with your firebase in google console when you try to publish it.

You can reference it: https://github.com/quanganh206/firebase-webrtc (it just work local with firebaseio)

Try with typings install dt~firebase --global --save as @Slavrix mention and

    "angularfire2": "^2.0.0-beta.2",
    "es6-shim": "^0.35.0",
    "firebase": "^3.2.0", 

Playing with it quite different with old example:
import { FIREBASE_PROVIDERS, defaultFirebase, AngularFire, AuthMethods, AuthProviders, firebaseAuthConfig } from 'angularfire2';

@Component({
  templateUrl: 'build/app.html',
  providers: [
    FIREBASE_PROVIDERS,
    // Initialize Firebase app  
    defaultFirebase({
      apiKey: 'YOURKEY',
      authDomain: 'ng2-webrtc-xxxx.firebaseapp.com',
      databaseURL: 'https://ng2-webrtc-xxxx.firebaseio.com',
      storageBucket: 'ng2-webrtc-xxxxx.appspot.com',
    }),
    firebaseAuthConfig({
      provider: AuthProviders.Google,
      method: AuthMethods.Popup,
      remember: 'default',
      scope: ['email']
    }),
    AngularFire
  ]
})

and then angularFire.auth.login(); some thing like that.

#18

Incase anyone having trouble with Ionic2 RC1, this works for me
http://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/


#19

How do we use this in RC2 with webpack?

Shane