Kendo-angular: TypeError: Cannot read property 'apply' of undefined in resizable GRID on AOT Build

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

I'm submitting a...

  • Bug report

Current behavior

progress/kendo-angular-grid : "1.7.1" with angular 5.1.2
After AOT build, any grid with resizable columns throws the following error on the console.

TypeError: Cannot read property 'apply' of undefined
at e.initResizeService (common.6b39ba8a6142c91d341d.chunk.js:1)
at e.ngAfterViewInit (common.6b39ba8a6142c91d341d.chunk.js:1)

e.prototype.initResizeService = function() {
this.resizeService.connect(l.Observable.merge.apply(l.Observable, this.resizeSensors.map(function(e) {
return e.resize
})))
}
I tried adding an import for 'rxjs/add/observable/merge' in my component but that doesn't seem to fix the issue.

Expected behavior

There should be no errors.

Environment

Package versions:

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angularclass/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Browser:

  • Chrome (desktop) version XX

System:

  • TypeScript version: 2.5.3
  • Node version: 8.9
  • Platform: Windows

picture rvrn22

Most helpful comment

We found a work around by turning off the build optimizer (--build-optimizer=false)
Try adding that flag to your ng build to see if it helps.

picture kotva006 on 23 Jan 2018
👍3

All 7 comments

same here

billdwhite picture billdwhite on 17 Jan 2018

Faced same issue after removed "node_module" folder and installed latest Angular and Kendo. Error ".apply() of undefined" appears on any "Grid" initialization.

Tried production builds with AOT and withou it:
"node --max_old_space_size=5048 "node_modules\@angular\cli\bin\ng" serve --aot -prod"
...
"node --max_old_space_size=5048 "node_modules\@angular\cli\bin\ng" serve -prod"

Only in develop build error does not appear:
ng serve

Used latest modules:

    "dependencies": {
        "@angular/animations": "5.2.1",
        "@angular/common": "5.2.1",
        "@angular/compiler": "5.2.1",
        "@angular/core": "5.2.1",
        "@angular/forms": "5.2.1",
        "@angular/http": "5.2.1",
        "@angular/platform-browser": "5.2.1",
        "@angular/platform-browser-dynamic": "5.2.1",
        "@angular/router": "5.2.1",
        "@progress/kendo-angular-charts": "1.4.0",
        "@progress/kendo-angular-dateinputs": "1.4.3",
        "@progress/kendo-angular-dropdowns": "1.6.0",
        "@progress/kendo-angular-excel-export": "1.0.5",
        "@progress/kendo-angular-grid": "1.7.1",
        "@progress/kendo-angular-inputs": "1.4.2",
        "@progress/kendo-angular-intl": "1.3.0",
        "@progress/kendo-angular-l10n": "1.0.5",
        "@progress/kendo-angular-popup": "1.3.3",
        "@progress/kendo-angular-upload": "2.1.1",
        "@progress/kendo-data-query": "1.1.2",
        "@progress/kendo-drawing": "1.4.1",
        "@progress/kendo-theme-default": "2.47.0",
        "core-js": "2.5.3",
        "crypto-js": "3.1.9-1",
        "hammerjs": "git+http://github.com/hammerjs/hammer.js.git",
        "lzma": "2.3.2",
        "material-design-icons": "3.0.1",
        "rxjs": "5.5.6",
        "webpack": "3.10.0",
        "zone.js": "0.8.20"
    },
    "devDependencies": {
        "@angular/cli": "1.6.5",
        "@angular/compiler-cli": "5.2.1",
        "@angular/language-service": "5.2.1",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/hammerjs": "2.0.35",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "jasmine-core": "2.8.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-coverage": "1.1.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-teamcity-reporter": "1.0.0",
        "protractor": "~5.2.0",
        "ts-node": "3.3.0",
        "tslint": "5.9.1",
        "typescript": "2.6.2"
    }

Also tried modules:

    "dependencies": {
        "@angular/animations": "5.1.2",
        "@angular/common": "5.1.2",
        "@angular/compiler": "5.1.2",
        "@angular/core": "5.1.2",
        "@angular/forms": "5.1.2",
        "@angular/http": "5.1.2",
        "@angular/platform-browser": "5.1.2",
        "@angular/platform-browser-dynamic": "5.1.2",
        "@angular/router": "5.1.2",
        "@progress/kendo-angular-charts": "1.3.3",
        "@progress/kendo-angular-dateinputs": "1.4.0",
        "@progress/kendo-angular-dropdowns": "1.2.4",
        "@progress/kendo-angular-excel-export": "1.0.5",
        "@progress/kendo-angular-grid": "1.6.1",
        "@progress/kendo-angular-inputs": "1.3.3",
        "@progress/kendo-angular-intl": "1.3.0",
        "@progress/kendo-angular-l10n": "1.0.5",
        "@progress/kendo-angular-popup": "1.3.0",
        "@progress/kendo-angular-upload": "2.0.2",
        "@progress/kendo-data-query": "1.1.1",
        "@progress/kendo-drawing": "1.4.0",
        "@progress/kendo-theme-default": "2.44.0",
        "core-js": "2.5.1",
        "crypto-js": "3.1.9-1",
        "hammerjs": "git+http://github.com/hammerjs/hammer.js.git",
        "lzma": "2.3.2",
        "material-design-icons": "3.0.1",
        "rxjs": "5.5.5",
        "webpack": "3.8.1",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "1.6.0",
        "@angular/compiler-cli": "5.1.2",
        "@angular/language-service": "5.1.2",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/hammerjs": "2.0.35",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "jasmine-core": "2.8.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-coverage": "1.1.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-teamcity-reporter": "1.0.0",
        "protractor": "~5.2.0",
        "ts-node": "3.3.0",
        "tslint": "5.8.0",
        "typescript": "2.6.1"
    }

And one of my first builds, when everything worked:

    "dependencies": {
        "@angular/animations": "5.0.2",
        "@angular/common": "5.0.2",
        "@angular/compiler": "5.0.2",
        "@angular/core": "5.0.2",
        "@angular/forms": "5.0.2",
        "@angular/http": "5.0.2",
        "@angular/platform-browser": "5.0.2",
        "@angular/platform-browser-dynamic": "5.0.2",
        "@angular/router": "5.0.2",
        "@progress/kendo-angular-charts": "1.3.3",
        "@progress/kendo-angular-dateinputs": "1.4.0",
        "@progress/kendo-angular-dropdowns": "1.2.4",
        "@progress/kendo-angular-excel-export": "1.0.5",
        "@progress/kendo-angular-grid": "1.6.1",
        "@progress/kendo-angular-inputs": "1.3.3",
        "@progress/kendo-angular-intl": "1.3.0",
        "@progress/kendo-angular-l10n": "1.0.5",
        "@progress/kendo-angular-popup": "1.3.0",
        "@progress/kendo-angular-upload": "2.0.2",
        "@progress/kendo-data-query": "1.1.1",
        "@progress/kendo-drawing": "1.4.0",
        "@progress/kendo-theme-default": "2.44.0",
        "core-js": "2.4.1",
        "crypto-js": "3.1.9-1",
        "hammerjs": "2.0.8",
        "lzma": "2.3.2",
        "material-design-icons": "3.0.1",
        "rxjs": "5.5.2",
        "webpack": "3.8.1",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "1.5.2",
        "@angular/compiler-cli": "5.0.2",
        "@angular/language-service": "5.0.2",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/hammerjs": "2.0.35",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "jasmine-core": "2.8.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-cli": "1.0.1",
        "karma-coverage": "1.1.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-teamcity-reporter": "1.0.0",
        "protractor": "~5.2.0",
        "ts-node": "3.3.0",
        "tslint": "5.8.0",
        "typescript": "2.6.1"
    }

Nothing is working now in production builds without this error.

Any ideas how to define "Observable.merge" in production builds for "Kendo" modules?

BaHXeLiSiHg picture BaHXeLiSiHg on 22 Jan 2018

We found a work around by turning off the build optimizer (--build-optimizer=false)
Try adding that flag to your ng build to see if it helps.

kotva006 picture kotva006 on 23 Jan 2018
👍3

that did the trick, using now:

node --max_old_space_size=5048 "node_modules\@angular\cli\bin\ng" serve --aot --build-optimizer=false -prod

Anyway, i even can not use Observable.merge.apply() in my components too, when building production. Maybe some problems with "RxJS" library?

BaHXeLiSiHg picture BaHXeLiSiHg on 23 Jan 2018

You should use the new "pipable operators", see #1244

tsvetomir picture tsvetomir on 24 Jan 2018

Should be working after updating to the latest package versions, see #1244

tsvetomir picture tsvetomir on 29 Jan 2018

Yes, it works now with the latest packages.

rvrn22 picture rvrn22 on 9 Feb 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fgladisch picture fgladisch  路  3Comments
MaklaCof picture MaklaCof  路  3Comments
svetq picture svetq  路  3Comments
tsvetomir picture tsvetomir  路  3Comments
Neaco picture Neaco  路  3Comments