Kendo-angular: Grid component doesn't work with Angular 8 in IE 11

[destus90]

Describe the bug
I have updated my project to Angular 8 and it seems that the kendo-angular-grid component doesn't work with the newest version of Angular after running ng build in IE11. In the browser's console I see ERROR Error: Cannot find a differ supporting object '[object Object],[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
In the latest version of Angular 7 it works quite well.

To Reproduce
Steps to reproduce the behavior:
1.git clone https://github.com/destus90/kendo-grid-issue

1. run npm ci in the directory of the clonned project
2. when all dependencies will be installed, run ng build command
3. in the dist directory create a simple static server to serve static files (I use node-static)
4. Go to IE11 and see the output in the browser's console

Expected behavior
It should work without any errors in the browser's console

Screenshots
See the picture

Browser

• OS: Windows 10, x64
• Browser [for example, Chrome, Safari]: IE11
• Version [for example, 22]
  "@angular/core": "~8.0.0",
  "@angular/cli": "~8.0.0",
  "@progress/kendo-angular-grid": "^3.14.3"

Additional context
tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": ["node"],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9

[danielkaradachki]

The provided sample does not import any of the polyfills required by Angular for Internet Explorer. Also, the tsconfig target should be "es5" in order for the app to work in IE. Once I added the polyfills and changed the target, the grid was working as expected.

[destus90]

@danielkaradachki
Can you paste the added polyfills? With version 8 they start using Differential Loading concept. And in my browserlist as you can see I prevent to run the app in IE9, not in IE11.

[danielkaradachki]

Indeed, seems that Angular should automatically add the polyfills with the used setup. I had to add the following polyfill in the polyfills.ts file in order for the Grid to be rendered without error:

import 'core-js/features/symbol/iterator';

[destus90]

@danielkaradachki
Thanks for answer. I have thought in the same way, but actually this works with some bugs. I will investigate it in the next few days.

[Alex-Torres]

Any chance that this may be the root of our problem with the Grid?

[clabough]

@Alex-Torres Don't think that's the issue. I'm using the github:angular/web-animations-js#release_pr208 version of that and still get the error for this issue. I added import 'core-js/features/symbol/iterator'; and used this browserslist and it's working for me now.

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-10 # For IE 9-11 support, remove 'not'.
safari > 10

[Alex-Torres]

Oh sweet @clabough good find! Going to try that today, thank you.

[destus90]

I can approve that adding import 'core-js/features/symbol/iterator' in the polyfills.ts file solves this issue. But may be it should be documented on the grid page, because when I'm creating a new app, I haven't got this import in my polyfills.ts file and it is not obvious that I should have added it.

[tsvetomir]

The Symbol.iterator polyfill is no longer required in the latest development builds.

[tsvetomir]

Fixed in v4.0.0