kendo-angular-grid upgrading beyond 1.6.1 and targeting es2016 throws TypeError

[mramirez-fdb]

I'm submitting a Bug report

Current behavior

I upgraded kendo-angular-grid from version 1.6.1(running fine) to version 2.0.0. After the upgrade any instances of the GridComponent throw exception "TypeError: Class constructor EventEmitter cannot be invoked without 'new'". I am running my project with angular 5.1.0 and angular/cli v1.6.1 and targeting the typescript build for es2016. When I change my target to es5 the problem goes away. Problem persists when targeting es2015. I have tracked the error to
progress/kendo-angular-grid/dist/es/common/event-emitter.js, the constructor of ZoneAwareEventEmitter. Basically it tries to instantiate an instance of the angular EventEmitter with .call() but that type of call is not allowed in es2016, nor es2015, from what I have read.

Expected behavior

I expect the the GridComponent to output proper es2016 code if I target it. I have not experienced similar issues in any other kendo angular component nor in previous versions of GridComponent. Every release after v1.6.1, all the way to v2 has the issues.

Minimal reproduction of the problem with instructions

1. npm install @angular/[email protected] -g
2. ng new kendo-app
3. in kendo-app add @progress/kendo-angular-grid and any dependencies.
4. add import { GridModule } from "@progress/kendo-angular-grid"; to app.module.ts and import it into AppModule.
5. In app.component.html add <kendo-grid></kendo-grid>
6. In tsconfig.app.json make sure that your compilerOptions have "target": "es2016"
7. serve the app with ng serve
8. When app loads in browser you should see error in developer console:
   ERROR TypeError: Class constructor EventEmitter cannot be invoked without 'new'
   at new ZoneAwareEventEmitter (event-emitter.js:10)
   at new GridComponent (grid.component.js:212)
   at createClass (core.js:10365)
   at createDirectiveInstance (core.js:10200)
   at createViewNodes (core.js:11657)
   at callViewAction (core.js:12091)
   at execComponentViewsAction (core.js:12000)
   at createViewNodes (core.js:11685)
   at createRootView (core.js:11546)
   at callWithDebugContext (core.js:12912)
9. I cannot produce an online runnable demo because plunker does not support angular cli projects and stackblitz does not allow changing the tsconfig so I cannot target es2016

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

I wanted to upgrade to latest version of the kendo grid to stay up-to-date with latest features and bug fixes but I also want to keep targeting es2016 to take advantage of smaller package sizes and faster execution.

Environment

Package versions:

+-- @angular-devkit/[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]
+-- @angular/[email protected]
+-- @angular/[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]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[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]

Browser:

• Chrome (desktop) version 64

System:

• TypeScript version: 2.2.1
• Node version: 6.9.1
• Platform: Windows 10

[tsvetomir]

Pretty neat to see that you're using ES2016 code in the browser :)

The issue seems to be caused by the fact that we ship only es5 bundles. As a result the ZoneAwareEventEmitter function "extends" the EventEmitter class from the Angular ES2015 bundle.

We should be able to fix this by shipping an ES2015 bundle in the packages.

Related to angular/angular-cli#8910 and Microsoft/TypeScript#15397

[mramirez-fdb]

Will the es2015 bundle be included in the next version of the package?

[tsvetomir]

The latest dev version of the Grid package adds an ES2015 bundle. This should resolve this issue and hopefully improve performance in modern browsers.

We'll continue with the rest of the packages over the next few days.

[tsvetomir]

All packages now ship ES2015 bundles in their latest dev versions. Feel free to give them a spin.

[tsvetomir]

Fixed in @progress/kendo-angular-grid v2.0.2

[tsvetomir]

Fixed in all latest package versions.

[tsvetomir]

Just noticed that this no longer works in Angular 6 production builds. Disabling the build optimizer seems to fix it, see angular/angular-cli#10658

[vishalmote]

Facing same issue in latest version "@progress/kendo-angular-grid": "^5.0.3", with angular 12.0.0-rc.0

[tsvetomir]

@vishalmote can you please try upgrading to the development build?

npm install --save @progress/kendo-angular-grid@dev