__WEBPACK_IMPORTED_MODULE_ xxxxx is not a function

[larssn]

(Was originally opened here: angular/angular#15866)

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Webpack (or Typescript) seems to strip static methods on inheritance. I'm posting here because the problem manifests in the context of Angular.

We're using angularfire2, and more specifically FirebaseListObservable.

FirebaseListObservable extends Observable, so FirebaseListObservable should have the static function of.

However, when I do ng serve I get the following error:

__WEBPACK_IMPORTED_MODULE_1_angularfire2__.a.of is not a function
    at AppComponent.webpackJsonp.132.AppComponent.ngOnInit

Expected behavior
Looking through angularfire2's code for FirebaseListObservable, they extend Observable like expected, and thus of should be available. So I'm not thinking it's their problem?

Minimal reproduction of the problem with instructions

ng new bug
npm install angularfire2 --save
npm install firebase --save
npm install rxjs --save

app.component.ts:

import { Component, OnInit } from '@angular/core';

import { FirebaseListObservable } from 'angularfire2';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {
    FirebaseListObservable.of({}).subscribe();
  }
}

ng serve --open

Please tell us about your environment:

• Angular version: 4.0.1

• Browser: [all]

• Language: TypeScript 2.2.2

• Node (for AoT issues): node --version = 7.8.0

[clydin]

You need to import any operators that will be used.
For of:

import 'rxjs/add/observable/of';

[larssn]

We already tried that, didn't do anything, sadly.

[clydin]

Looking at your code again, using FirebaseListObservable in that way really doesn't make sense. You're creating a custom observable with a particular value. Observable itself would be the appropriate class to use.

[larssn]

Hm, well we need the custom methods (push etc.) that only FirebaseListObservable provides. Since its heavily promise-based, we need to do certain tricks to make it work in Observable chains.

Just trust me when I say we need the of function to be available. It should work, anyway.

[clydin]

Those methods require the presence of an AngularFire instance. They would not function in isolation.
See the class implementation; The AngularFire library would need to create a custom of function that dummies out the underlying infrastructure for that to work.

[sumitarora]

Closing as above ☝️

[larssn]

I don't think its intuitive that the of method is not inherited. Also, typescript allows me to transpile it without errors.

[clydin]

If you look at how the function is added via the import (see here), the type information is updated but the function is patched onto Observable at runtime.
Even if it did execute, it would not return a FirebaseListObservable.

[mapsgeek]

@clydin well that worked for me solving importing for plugin scripts for leafletjs but i don't understand why ? in angular 7 the exact same setup was working just fine, in upgrade to 8 i had to look for a solution for this problem !

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}