Angular CLI remove arrow functions?

Question

I am trying to get my code running on IE11, however, I am having issues with arrow functions. I cannot figure out how to remove them from the build and replace them with function() {}.

It looks like they were removed from my main.js, but in the vendor.js file, the arrow functions still persist. How can I remove them?

I have a browserslist that looks like this:

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

I also have a tsconfig.json that looks like this:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "importHelpers": true,
        "outDir": "../path/to/folder",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

I believe your tsconfig should be targeting es2015, then when you build production, it should generate legacy es5 bundles that won't include arrows or any es6 features. angular.io/guide/deployment#differential-loading — Damian C
– Damian C, Commented Nov 27, 2019 at 0:03
@DamianC doing that does create a legacy build, however, es6 arrow functions still exist in the file. — Get Off My Lawn
– Get Off My Lawn, Commented Nov 27, 2019 at 15:24
Can you share an excerpt and file name of an es5 bundle with an arrow function? Also can you post the production section of your angular.json — Damian C
– Damian C, Commented Nov 27, 2019 at 18:10
Are you using external js library containing arrow functions? The CLI does not transpile Javascript code. Third-party code is expected to be in the appropriate format. Besides, you could also refer to this thread, set lib to "es5", "es6", "dom" to see if it works. — Yu Zhou
– Yu Zhou, Commented Nov 28, 2019 at 2:19

score 1 · Accepted Answer · 2019-11-26 22:48:48Z

1

You can use the "files", "include", and "exclude" properties in your tsconfig.json to specify which files to compile. I'm pretty sure it won't touch .js files by default. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#examples https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#details

edited Nov 26, 2019 at 22:48

answered Nov 26, 2019 at 22:47

user6080677

Sign up to request clarification or add additional context in comments.

2 Comments

Get Off My Lawn Over a year ago

what will happen to vendor.js that angular/webpack generates?

Damian C Over a year ago

In most cases you should avoid making changes like this to the tsconfig as the cli makes a few assumptions about what your typescript config will be.

Jeremy · Accepted Answer · 2019-12-03 02:46:35Z

0

One of my vendor dependencies "debug" contained arrow functions (view source). These dependencies are not transpiled and thus IE11 cannot parse the js file.

In my case I reverted the offending package back to an older version. eg. package.json

"debug": "^3.2.6",

To find the offending dependency serve your angular application as ES5 and use the IE11 developer tools to pinpoint the line the js file breaks at. This will give you a clue as to what npm package it is. You can then use npm ls to map the dependency tree of the package.

answered Dec 3, 2019 at 2:46

Jeremy

3,9614 gold badges37 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular CLI remove arrow functions?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related