search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

Getting js error, ERROR TypeError: this._eventBus.asObservable(...).filter is not a function, when upgraded to Angular 10 #18272

Closed azherf closed 4 years ago

azherf commented 4 years ago

🐞 bug report

Affected Package

The issue is caused by package "@angular-devkit/build-angular": "^0.1000.3" and "ng-broadcaster": "^7.0.1", ### Description We recently upgraded to Angular 10. That started giving us one js error in ng-broadcaster. The error does not show up when we run `npm start`. Only when we do a production build and deploy it, this error is coming up. ## 🔥 Exception or Error 



core.js:4081 ERROR TypeError: this._eventBus.asObservable(...).filter is not a function
Screenshot from 2020-07-16 19-38-58

Screenshot from 2020-07-16 19-41-41

🌍 Your Environment

package.json using which the error is coming up:


{
 "name": "taxilla-frontend",
 "version": "3.4.5",
 "scripts": {
 "ng": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng",
 "start": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng serve --aot",
 "build": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng build",
 "test": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng test",
 "lint": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng lint",
 "e2e": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng e2e",
 "reset": "rm -R node_modules && npm i",
 "postinstall": "ngcc",
 "postbuild": "node ./build/post-build.js"
 },
 "private": true,
 "dependencies": {
 "@angular/animations": "^10.0.3",
 "@angular/cdk": "^10.0.1",
 "@angular/common": "~10.0.3",
 "@angular/compiler": "~10.0.3",
 "@angular/core": "~10.0.3",
 "@angular/forms": "~10.0.3",
 "@angular/http": "~7.2.4",
 "@angular/localize": "^10.0.3",
 "@angular/material": "^10.0.1",
 "@angular/material-moment-adapter": "^10.0.1",
 "@angular/platform-browser": "~10.0.3",
 "@angular/platform-browser-dynamic": "~10.0.3",
 "@angular/pwa": "^0.801.2",
 "@angular/router": "~10.0.3",
 "@angular/service-worker": "~10.0.3",
 "@ng-bootstrap/ng-bootstrap": "^4.0.0",
 "@swimlane/ngx-charts": "^14.0.0",
 "@types/echarts": "^4.1.9",
 "angular-gridster2": "^8.2.0",
 "angular2-query-builder": "^0.6.0",
 "angular2-uuid": "^1.1.1",
 "angular2gridster": "^8.1.0",
 "bootstrap": "^4.2.1",
 "classlist.js": "^1.1.20150312",
 "core-js": "^2.5.4",
 "d3": "^5.9.1",
 "echarts": "^4.2.1",
 "element-remove": "^1.0.4",
 "es6-promise": "^4.2.8",
 "font-awesome": "^4.7.0",
 "jquery": "^3.5.1",
 "moment": "^2.22.2",
 "ng-broadcaster": "^7.0.1",
 "ngx-bootstrap": "^5.1.1",
 "ngx-echarts": "^4.1.1",
 "node-sass": "^4.12.0",
 "rxjs": "~6.6.0",
 "rxjs-compat": "^6.3.3",
 "taxilla-library": "2.6.0-beta.3",
 "web-animations-js": "^2.3.2",
 "zone.js": "~0.10.2",
 "hammerjs": "^2.0.8"
 },
 "devDependencies": {
 "@angular-devkit/build-angular": "^0.1000.3",
 "@angular/cli": "~10.0.1",
 "@angular/compiler-cli": "^10.0.3",
 "@angular/language-service": "~10.0.3",
 "@types/bootstrap": "^4.1.2",
 "@types/cross-storage": "^0.8.29",
 "@types/crypto-js": "^3.1.43",
 "@types/fontfaceobserver": "0.0.6",
 "@types/jasmine": "~3.3.8",
 "@types/jasminewd2": "~2.0.3",
 "@types/jquery": "^3.5.0",
 "@types/node": "~10.12.19",
 "@types/pbkdf2": "^3.0.0",
 "codelyzer": "~4.5.0",
 "cross-storage": "^1.0.0",
 "crypto-js": "^3.1.9-1",
 "express": "^4.16.4",
 "fontfaceobserver": "^2.1.0",
 "jasmine-core": "~3.3.0",
 "jasmine-spec-reporter": "~4.2.1",
 "karma": "^4.0.1",
 "karma-chrome-launcher": "~2.2.0",
 "karma-coverage-istanbul-reporter": "~2.0.1",
 "karma-jasmine": "~2.0.1",
 "karma-jasmine-html-reporter": "^1.4.0",
 "ngx-webstorage-lppedd": "^99.0.3",
 "pbkdf2": "^3.0.17",
 "protractor": "~5.4.0",
 "transformation-matrix": "^1.7.0",
 "ts-node": "~8.0.2",
 "tslint": "~6.1.0",
 "typescript": "~3.9.6",
 "webcola": "^3.3.8"
 }
}

In the above package.json, we tried building with different build-angular plugins like 0.1000.1, 0.1000.2 and 0.1000.3. Nothing worked. If we go back to 


"@angular-devkit/build-angular": "^0.901.0",

the error is not coming but the app builds with many warnings.

What could be the issue here ? Is it angular related or our app related ?

Thanks for help.

chenc041 commented 4 years ago

in rxjs 6.x, u should use pipe? like this 

import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';

class Sub {

  _eventBus: Subject<any>;
  constructor() {
    this._eventBus = new Subject();
  }

  broadcast(key: any, data: any) {
    this._eventBus.next({key, data})
  }

  on(key: any) {
    this._eventBus.asObservable().pipe(
      filter(event => event.key === key),
      map(event => event.data)
    );
  }

}
azherf commented 4 years ago

Hi @chenc041 ,

I thought too, but the same code, without pipe is working fine in Angular 9.

With the following dependencies it works perfectly fine. rxjs is 6.x.


"dependencies": {
        "@angular/animations": "^9.1.0",
        "@angular/cdk": "^9.2.0",
        "@angular/common": "~9.1.0",
        "@angular/compiler": "~9.1.0",
        "@angular/core": "~9.1.0",
        "@angular/forms": "~9.1.0",
        "@angular/http": "~7.2.4",
        "@angular/localize": "^9.1.0",
        "@angular/material": "^9.2.0",
        "@angular/material-moment-adapter": "^9.2.0",
        "@angular/platform-browser": "~9.1.0",
        "@angular/platform-browser-dynamic": "~9.1.0",
        "@angular/pwa": "^0.801.2",
        "@angular/router": "~9.1.0",
        "@ng-bootstrap/ng-bootstrap": "^4.0.0",
        "@swimlane/ngx-charts": "^14.0.0",
        "angular-gridster2": "^8.2.0",
        "angular2-query-builder": "^0.6.0",
        "angular2-uuid": "^1.1.1",
        "bootstrap": "^4.2.1",
        "classlist.js": "^1.1.20150312",
        "core-js": "^2.5.4",
        "element-remove": "^1.0.4",
        "es6-promise": "^4.2.8",
        "font-awesome": "^4.7.0",
        "hammerjs": "^2.0.8",
        "jquery": "^3.5.1",
        "moment": "^2.22.2",
        "ng-broadcaster": "^7.0.1",
        "ngx-bootstrap": "^5.1.1",
        "rxjs": "~6.5.4",
        "rxjs-compat": "^6.3.3",
        "taxilla-library": "2.6.0-beta.8",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.10.2",
        "cross-storage": "^1.0.0",
        "crypto-js": "^3.1.9-1",
        "pbkdf2": "^3.0.17",
        "ngx-webstorage-lppedd": "^99.0.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.901.0",
        "@angular/cli": "~9.1.0",
        "@angular/compiler-cli": "^9.1.0",
        "@angular/language-service": "~9.1.0",
        "@types/bootstrap": "^4.1.2",
        "@types/cross-storage": "^0.8.29",
        "@types/crypto-js": "^3.1.43",
        "@types/fontfaceobserver": "0.0.6",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/jquery": "^3.5.0",
        "@types/node": "~10.12.19",
        "@types/pbkdf2": "^3.0.0",
        "node-sass": "^4.12.0",
        "codelyzer": "~4.5.0",
        "express": "^4.16.4",
        "fontfaceobserver": "^2.1.0",
        "jasmine-core": "~3.3.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^4.0.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "transformation-matrix": "^1.7.0",
        "ts-node": "~8.0.2",
        "tslint": "~6.1.0",
        "typescript": "~3.7.5",
        "webcola": "^3.3.8",
        "webpack-bundle-analyzer": "^3.8.0"
    }
JoostK commented 4 years ago

This is due to rxjs-compat no longer being supported in Angular 10. The side-effecful module imports to register operators on the Observable prototype all require rxjs-compat, as this mode of operation has been removed in RxJS 6 (which Angular adopted in its v6, coincidentally.) Probably there's some dependency that's still depending on it (the screenshot hints at ng-broadcaster, as it does contain such imports).

There's some earlier issues like this but I can't seem to find them right away.

JoostK commented 4 years ago

Finally got Github to find me the related issues: #18213, #18052, #18045 and #18035.

@alan-agius4 can this be documented as breaking change somewhere?

alan-agius4 commented 4 years ago

@JoostK, not that I am aware of.

alan-agius4 commented 4 years ago

Related PR https://github.com/angular/angular-cli/pull/17612

alan-agius4 commented 4 years ago

Added a note in the release page https://github.com/angular/angular-cli/releases/tag/v10.0.0

azherf commented 4 years ago

Thanks @alan-agius4 and @JoostK .

angular-automatic-lock-bot[bot] commented 4 years ago

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.