Kendo-angular: DropdownList Observable.merge is not a function in angular 5 and lazy loaded module

Created on 12 Jan 2018  路  7Comments  路  Source: telerik/kendo-angular

I'm submitting a...

  • Bug report

Current behavior

  • The Kendo Angular DropDownList component (version 1.6.0) uses rxjs merge operator, but fails when you run your app in prod mode and you use the drop-down control inside of a lazy loaded module.

Expected behavior

  • Control displays without a problem.

Minimal reproduction of the problem with instructions

What is the motivation or use case for changing the behavior?

This is an error that first gets picked up in production builds, so only seen when already built.

Environment

Package versions:

@progress/[email protected]
@angular/animations@^5.0.0
@angular/common@^5.0.0
@angular/compiler@^5.0.0
@angular/core@^5.0.0
@angular/forms@^5.0.0
@angular/http@^5.0.0
@angular/platform-browser@^5.0.0
@angular/platform-browser-dynamic@^5.0.0
@angular/router@^5.0.0
@ng-bootstrap/ng-bootstrap@^1.0.0-beta.8
@ngx-translate/core@^9.0.2
@ngx-translate/http-loader@^2.0.1
@progress/kendo-angular-dateinputs@^1.4.2
@progress/kendo-angular-dialog@^1.3.0
@progress/kendo-angular-excel-export@^1.0.5
@progress/kendo-angular-grid@^1.6.4
@progress/kendo-angular-inputs@^1.4.0
@progress/kendo-angular-intl@^1.3.0
@progress/kendo-angular-l10n@^1.0.5
@progress/kendo-angular-layout@^1.1.0
@progress/kendo-data-query@^1.1.2
@progress/kendo-drawing@^1.4.0
@tss/bootstrap-theme@^1.0.4
@tss/kendo-bootstrap-theme@^1.4.0
core-js@^2.4.1
rxjs@^5.5.2
zone.js@^0.8.14

Browser:

  • Chrome (desktop) version 63.0.3239.132
  • Firefox version 56.0
  • Edge version 41.16299.15.0

System:

  • TypeScript version: 2.4.2
  • Node version: v8.7.0 npm 5.5.1
  • Platform: Windows

microsoftteams-image 2

Bug dropdowns

Most helpful comment

Looks like we have same kind of issue for Grid as well (--prod mode)

Error Message
Error: Uncaught (in promise): TypeError: this.pageChange.map(...).merge is not a function
TypeError: this.pageChange.map(...).merge is not a function
at t.attachStateChangesEmitter (grid.component.js:1134)
at new t (grid.component.js:289)
at co (core.js:12431)
at uo (core.js:12266)
at Ho (core.js:13727)
at Xo (core.js:14161)
at Yo (core.js:14070)
at Ho (core.js:13755)
at Mo (core.js:13616)
at Object.nl [as createRootView] (core.js:14309)
at t.attachStateChangesEmitter (grid.component.js:1134)
at new t (grid.component.js:289)

package.json

@angular/animations: 5.2.0, @angular/common: 5.2.0, @angular/compiler: 5.2.0, @angular/core: 5.2.0, @angular/forms: 5.2.0, @angular/platform-browser: 5.2.0, @angular/platform-browser-dynamic: 5.2.0, @angular/platform-server: 5.2.0, @angular/router: 5.2.0, @progress/kendo-angular-buttons: 2.0.0, @progress/kendo-angular-charts: 1.3.4, @progress/kendo-angular-dateinputs: 1.4.2, @progress/kendo-angular-dialog: 1.3.0, @progress/kendo-angular-dropdowns: 1.5.0, @progress/kendo-angular-excel-export: 1.0.5, @progress/kendo-angular-grid: 1.6.5, @progress/kendo-angular-inputs: 1.4.2, @progress/kendo-angular-intl: 1.3.0, @progress/kendo-angular-l10n: 1.0.5, @progress/kendo-angular-layout: 1.2.0, @progress/kendo-angular-popup: 1.3.1, @progress/kendo-angular-sortable: 1.0.5, @progress/kendo-angular-upload: 2.1.0, @progress/kendo-data-query: 1.1.2, @progress/kendo-date-math: 1.1.1, @progress/kendo-drawing: 1.4.0, @progress/kendo-file-saver: 1.0.4, @progress/kendo-theme-default: 2.46.1-dev.201801020948, @progress/kendo-theme-material: 0.3.0, rxjs: 5.5.2, ts-helpers: 1.1.2, zone.js: 0.8.14,

All 7 comments

Looks like we have same kind of issue for Grid as well (--prod mode)

Error Message
Error: Uncaught (in promise): TypeError: this.pageChange.map(...).merge is not a function
TypeError: this.pageChange.map(...).merge is not a function
at t.attachStateChangesEmitter (grid.component.js:1134)
at new t (grid.component.js:289)
at co (core.js:12431)
at uo (core.js:12266)
at Ho (core.js:13727)
at Xo (core.js:14161)
at Yo (core.js:14070)
at Ho (core.js:13755)
at Mo (core.js:13616)
at Object.nl [as createRootView] (core.js:14309)
at t.attachStateChangesEmitter (grid.component.js:1134)
at new t (grid.component.js:289)

package.json

@angular/animations: 5.2.0, @angular/common: 5.2.0, @angular/compiler: 5.2.0, @angular/core: 5.2.0, @angular/forms: 5.2.0, @angular/platform-browser: 5.2.0, @angular/platform-browser-dynamic: 5.2.0, @angular/platform-server: 5.2.0, @angular/router: 5.2.0, @progress/kendo-angular-buttons: 2.0.0, @progress/kendo-angular-charts: 1.3.4, @progress/kendo-angular-dateinputs: 1.4.2, @progress/kendo-angular-dialog: 1.3.0, @progress/kendo-angular-dropdowns: 1.5.0, @progress/kendo-angular-excel-export: 1.0.5, @progress/kendo-angular-grid: 1.6.5, @progress/kendo-angular-inputs: 1.4.2, @progress/kendo-angular-intl: 1.3.0, @progress/kendo-angular-l10n: 1.0.5, @progress/kendo-angular-layout: 1.2.0, @progress/kendo-angular-popup: 1.3.1, @progress/kendo-angular-sortable: 1.0.5, @progress/kendo-angular-upload: 2.1.0, @progress/kendo-data-query: 1.1.2, @progress/kendo-date-math: 1.1.1, @progress/kendo-drawing: 1.4.0, @progress/kendo-file-saver: 1.0.4, @progress/kendo-theme-default: 2.46.1-dev.201801020948, @progress/kendo-theme-material: 0.3.0, rxjs: 5.5.2, ts-helpers: 1.1.2, zone.js: 0.8.14,

Same problem for us. Using the grid.

It is breaking during build-optimization, it works with --build-optimizer=false

This is also a problem when using the DialogService inside of a lazy loaded module

A temporary workaround for people that still want to use build optimization is to use rxjs 5.4.3 (or lower).

package.json

{
  ...
  "dependencies": { 
    ...
    "rxjs": "5.4.3"
  }
}

@Dastardl you can't do that because of Angular 5.0 dependency on RxJS 5.5.2

It seems to be working now with the fresh new packages!! 馃憤

microsoftteams-image 4

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tsvetomir picture tsvetomir  路  3Comments

ilianiv picture ilianiv  路  3Comments

fgladisch picture fgladisch  路  3Comments

ChrisProlls picture ChrisProlls  路  3Comments

patrykp57 picture patrykp57  路  3Comments