Ionic 2 with FireBase and AngularFire2 Issue

Ionic Framework ionic-v3
1

After upgrading to the latest version of AngularFire2@2.0.0-beta.6 I am getting the following errors when I try to run Ionic Serve.

TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/app/pages/home/home.ts(43,67): Error TS2339: Property 'flatMap' does not exist on type 'FirebaseListObservable<any[]>'.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/app/pages/home/home.ts(44,66): Error TS2339: Property 'flatMap' does not exist on type 'FirebaseListObservable<any[]>'.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/app/pages/popover/popover.ts(40,67): Error TS2339: Property 'flatMap' does not exist on type 'FirebaseListObservable<any[]>'.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/app/pages/popover/popover.ts(41,66): Error TS2339: Property 'flatMap' does not exist on type 'FirebaseListObservable<any[]>'.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/app/pages/popover/popover.ts(42,65): Error TS2339: Property 'flatMap' does not exist on type 'FirebaseListObservable<any[]>'.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/angularfire2/angularfire2.d.ts(5,10): Error TS2305: Module '"C:/Users/nicjr/Documents/Personal/hydrate/node_modules/@angular/core/index"' has no exported member 'ModuleWithProviders'.

I have been able to get everything working with AngularFire2@2.0.0-beta.2 but due to some auth issues I would like to use the updated version as soon as possible.

Ionic Info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS:
Node Version: v7.0.0

The entire project is available on GitHub

Any help is greatly appreciated this is my senior project for college!

Nick

2

Try adding at the top

import ‘rxjs/add/operator/flatMap’

See:

3

Tried a few different examples that were posted in your link and still receiving the same issues =(.

If I import ‘rxJs’ the flatMap typescript errors go away but instead I get all of the rxJs typescript errors in the world.

TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(22,93): Error TS1005: '(' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(22,94): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(22,109): Error TS1005: '(' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,48): Error TS1138: Parameter declaration expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,52): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,67): Error TS1109: Expression expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,74): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,106): Error TS1109: Expression expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,115): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,155): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,156): Error TS1128: Declaration or statement expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zip.d.ts(23,171): Error TS1005: '(' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,38): Error TS1138: Parameter declaration expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,42): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,57): Error TS1109: Expression expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,67): Error TS1109: Expression expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,97): Error TS1005: ';' expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,98): Error TS1128: Declaration or statement expected.
TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate/node_modules/rxJs/operator/zipAll.d.ts(8,113): Error TS1005: '(' expected.
4

Probably easier to transfer your pages to an up to date project.
See: https://github.com/tja4472/ionic-angularfire

hth
Tim

5

Thanks I will have to give that a shot, do you know if there is a tabed version? Either way I could probably convert it to tabs pretty easily.

6

ionic start myTabs tabs --v2

:slight_smile:

7

Thank you very much I am about halfway done refactoring my code from the old project into this new one!

8

After creating a new project I was able to fix the issue but not just because it is a new project i was actually calling the observable incorrectly.

this.af.auth.subscribe(user => {
    this.user = user;
    this.userID = this.user.uid;
  });

  this.items = af.database.list('water/' + this.userID);
  
  this.items.subscribe(data => {
    this.itemsSub = data;
    this.lastFirebaseItems = this.itemsSub[this.itemsSub.length-1];
  });

  this.firebaseWater = this.lastFirebaseItems.water;
  this.firebaseDate = this.lastFirebaseItems.date;  
  this.firebaseKey = this.lastFirebaseItems.$key;

Allowed me to get all of the correct information without the need of using rxjs!

Thanks for the help and hopefully this helps someone in the future!

Nick