Specify NPM module platform to use in Angular

Viewed 58

I have an existing Angular app that works a charm in Chrome but fails on (obviously) Internet Explorer. What's happening is this:

Several of the NPM modules I install come with different distributions. So for example, the folder structure under kendo-angular-charts looks like this:

- dist
   |- cdn
   |- es
   |- es2015
   |- npm
   |- systemjs

When the site breaks in IE, it's because of the following declaration in es2015\common\configuration.service.js:

export class Change {
    constructor(key, value) {
        this.key = key;
        this.value = value;
    }
}

It breaks (invalid syntax error) because ES2015 classes are not supported in Internet Explorer. But there is also a perfectly valid ES5 version of the file in the es folder.

So how do I use that instead?

I have checked angular.json and package.json for options that seem related, but couldn't find anything.

3 Answers

was there ever an answer found to this. I am having the same issue with the grid. It was working a couple of weeks ago and now it is not. I cannot determine what changed to cause the use of the es2015 vs the es library. Is there a particular core-js polyfill that controls this?

The correct way to specify the JavaScript dialect to be used in your compiler output, is the target property in tsconfig.json. In our case we needed to set its value to es5.

This only applies to your code though, not to the imported packages.

Additionally, most imports normally just specify the package name, but you should also look for imports that specifically target the wrong version. In our case, we had an import under @progress/kendo-angular-charts/dist/es2015, which was the source of our problem.

Related