IE Failure Due to Incomplete Transpilation

[Vandivier]

Versions

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->

Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.6.2
webpack: 3.10.0

Repro steps

• Step 1 npm install this Ella Framework repro
• Step 2 npm start to observe it compiles, works in Chrome, fails in IE
• Step 3 npm run build-dev to observe output /dist/vendor.bundle.js contains arrow functions and other invalid es5 syntax.

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

1 - App works in Chrome
2 - App has syntax failure in IE
3 - building to disk results in invalid es5

Desired behavior

1 - Building to disk should reflect proper es5 target as specified in tsconfig.json
2 - IE10 should be fully supported, when building to disk or using Webpack dev server
3 - Ideally / optionally, webpack's config can be exposed so advanced projects can have finely-tuned control over transpilation and configuration to stop gap or workaround issues until/if Angular CLI solutions are officially implemented.

Mention any other details that might be useful (optional)

polyfills.ts was uncommented as expected for IE support in an Angular 5 project.

[Vandivier]

minor update.

1 - tried updating to cli 1.6.5; issue persists
2 - tried replacing es2017 with es5 or es6 in tsconfig snippet below, as recommended here. Issue persists.

"lib": [
  "es2017",
  "dom"
]

[zaalbarxx]

Hi!
I also noticed some problem with the transpilation build, I digged a bit into it, I have @ngforage/ngforage-ng5 installed in my package.json and I noticed some weird stuff, during transpilation of @angular/common the source code is taken from esm5 directory while for this ng-forage package it is taken from esm2015 and it causes my build to fail in IE11 because I get the code that contains class syntax, also as far as I remember I've also seen some code from zone.js to also not being transpiled properly. Could someone explain to me how does the resolving of package main file work ? It is very weird to me as every package, but the one mentioned above seems to transpile properly. I checked package.json of if and it looks fine:

...

"es2015": "dist/esm2015/index.js",
  "homepage": "https://github.com/Alorel/ngforage",
  "jsdelivr": "dist/umd/index.min.js",
  "license": "MIT",
  "main": "dist/es5/index.js",
  "module": "dist/esm5/index.js", <--- looks fine
  "name": "@ngforage/ngforage-ng5",

[hansl]

@Vandivier

The JavaScript files in ella-utils contains arrow functions. Since we do not transpile .js files, that code is included as in in your build output. You should transpile ella-utils to compatible JavaScript.

Closing this as it's not an issue with the CLI.

[Vandivier]

@hansl Thanks! That is a workable solution since ella-utils is under my control.

For my awareness: is transpiling planned at any time for angular-cli? I am wondering how I would handle this with a third party library I can't control as it appears happened to @zaalbarxx

[Vandivier]

In case anyone stumbles on to this issue, replacing dependency code is not always feasible. But there is a relatively simple solution. In fact I could submit a PR to easily integrate it into Angular CLI

Just transpile the output folder using babel

Step 1, package.json "build-dev": "ng build"
Step 2, CLI: npm run build-dev
Assume this outputs a folder called dist
Step 3, in package.json "babel": "babel dist --out-dir dist"
Step 4, in CLI: npm run babel

Observe dist is there, but javascript from any number of dependencies has been centrally transpiled.

[AzrizHaziq]

to add @Vandivier suggestion

this is my scripts in package.json

    "build": "ng build --prod --aot --build-optimizer --vendor-chunk=true --common-chunk=true",
    "postbuild": "babel folderpath -d folderpath --ignore folderpath/assets/* --minified",

what is does is after finish build script it will automatically run postbuild script. Also I include --minified in babel.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}