Ionic 2 issue with flatMap property does not exist on type FirebaseListObservable<any[]>

[ghost]

Hello everyone,

I am working on my senior college project which is an Ionic 2 app to track water intake using Firebase as the database. I have been able to get the app to build using the follow:

angularfire2": "^2.0.0-beta.2",
"es6-shim": "0.35.1",
"firebase": "^3.5.2",

Using the this version of AngularFire2 I am running into some auth issues on build as others have:

Uncaught Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http or https.

To fix this issue I am trying to use the latest version of [email protected] but I run into the following errors on build.

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 tried importing rxjs but that causes more typescript issues than it fixes.

Here is some general information about my environment as well the link to the entire project which is on GitHub.

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

Any help is greatly appreciated to help finish this project on time! Please let me know if any additional information is needed to fix this issue.

Thanks,
Nick

[mukesh51]

@nicholas-richardson I am not close to ionic, but try adding at the top

import 'rxjs/add/operator/flatMap'

Also refer to #531

[ghost]

@mukesh51 after adding that and trying a few different approaches such as

import { flatMap } from 'rxjs/add/operator/mergeMap' import { mergeMap } from 'rxjs/add/operator/mergeMap

I receiving the same errors as above with an additon of the follow:

Error: Cannot find module 'rxjs/add/operator/flatMap' from 'C:\Users\nicjr\Documents\Personal\hydrate\app\pages\home'
Error: Cannot find module 'rxjs/add/operator/flatMap' from 'C:\Users\nicjr\Documents\Personal\hydrate\app\pages\popover'

[mukesh51]

@nicholas-richardson your import syntax is not correct. when importing operators, you just need to add the below line as is

import 'rxjs/add/operator/flatMap'

The general syntax is

import 'rxjs/add/operator/Operator Name';

Hope this helps.

[ghost]

Sorry I should have included that I tried as you specified with just adding import 'rxjs/add/operator/flatMap' to my component with no success =(

[mukesh51]

Apologies:- I just looked at the definition file. you need to import mergeMap. you can find the definitions at the following location ("node_modules\rxjs\add\operator") in your project

so please add the following import statement and use flatMap.

import 'rxjs/add/operator/mergeMap';

and it should work. the below sample snippet worked for me. I am returning a static array, but it shouldn't matter. Let me know how it goes for you.

....
this.af.database.list('/items').flatMap(function(requestUrl) {
    return  ['a','b','c','d'];
  }).subscribe(result => {
            console.log('flatMap output',result);
   });
....

[ghost]

After adding that it seems to fix the flatMap issue but has caused a few other issues related to the import of mergeMap.

TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,40): Error TS1138: Parameter declaration expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,44): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,59): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,68): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,117): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,130): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,138): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,139): Error TS1128: Declaration or statement expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(56,154): Error TS1005: '(' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,43): Error TS1138: Parameter declaration expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,47): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,62): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,71): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,120): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,136): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,226): Error TS1109: Expression expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,234): Error TS1005: ';' expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,235): Error TS1128: Declaration or statement expected. TypeScript error: C:/Users/nicjr/Documents/Personal/hydrate.me-ionic/node_module s/rxjs/operator/mergeMap.d.ts(57,250): Error TS1005: '(' expected.

[mukesh51]

This might be unrelated to your above error, but looking at your package.json, seems like your angular-version is old. For example angular has moved away from es6-shim to core-js.
Do you want to try upgrading your project with latest modules. My package.json looks like this :

"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"angularfire2": "^2.0.0-beta.5",
"core-js": "^2.4.1",
"firebase": "^3.5.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
}

[katowulf]

This is one of the primary reasons we need you to follow the issue template when submitting. A lot of time wasted here discovering that you aren't on the correct versions. If you have additional issues, please resubmit, following the required template.