App appears to not transpile correctly to ES5, breaking in IE11

[jasoninrapid]

Please provide us with the following information:

OS?

Windows 8.1

Versions.

@angular/cli: 1.0.0-rc.1
node: 7.5.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

(I upgraded to the RC1 release this morning and still have no luck.)

Repro steps.

I have an @ngrx based app that works fine in Chrome and Firefox. In IE11 I get an syntax error when the browser encounters a class keyword in inline.bundle.js vendor.bundle.js:

class InvertedIndexNode {
	constructor(charCode) {
		this.charCode = charCode;
		this.next = null;
		this.firstChild = null;
		this.firstPosting = null;
	}
}

Later I get "Unable to get property 'call' of undefined or null reference" from a line in inline.bundle.js, where it appears webpack is attempting to load a moduleId that doesn't exist in modules:

function __webpack_require__(moduleId) {

	// Check if module is in cache
	if(installedModules[moduleId])
		return installedModules[moduleId].exports;

	// Create a new module (and put it into the cache)
	var module = installedModules[moduleId] = {
		i: moduleId,
		l: false,
		exports: {}
	};

	// Execute the module function
	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);//ERROR HERE

	// Flag the module as loaded
	module.l = true;

	// Return the exports of the module
	return module.exports;
}

Here is my tsconfig:

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

Here is polyfills.ts:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

It seems like this isn't transpiling to ES5.

---

Thanks! We'll be in touch soon.

[mattdistefano]

Your inline bundle (i.e. the transpiled code) actually contains class InvertedIndexNode { } or is that the source TS file?

[jasoninrapid]

The JS actually contains class InvertedIndexNode { } - that is what IE11 is tripping up on. It is there in the JavaScript. My assumption was that that should be transpiled for ES5, not handled by a shim, but I have enabled all the shims too.

[jasoninrapid]

I upgraded to the RC1 this morning and still have no luck.

[mattdistefano]

Where does the InvertedIndexNode class come from? It's in your vendor bundle so I'm assuming it's a third party lib.

[jasoninrapid]

I actually found it this morning, but am not quite got the cause narrowed down. It is a node module that is distributed in ES6 with typings, and apparently the CLI is no longer transpiling that code. I fixed it by just grabbing the backing TypeScript and putting it in a library folder locally and compiling it. I will report back when I figure out what changed in tye CLI config when I upgraded.

[jasoninrapid]

The node module in question is the ndx elastic search, which is awesome and worked great even in IE11 until recently.

[filipesilva]

Uhm if the end JS has class InvertedIndexNode { } then it's because that's in the JS source for that module has it. We don't use babel or anything on node dependencies so it's not transpiled to ES5. Maybe that library stopped supporting ES5.

[mdudek]

Hi, have you found a fix @jasoninrapid? I'm facing same issue now.

[alexander-kovalev]

Maybe it will be usefull but I just changed tsconfig.json property compilerOptions->lib from [es6, dom] to [es5, dom] and Syntax Error disappeared in IE 11.

[Metsuryu]

@alexander-kovalev Didn't work for me :\

[abbymrs]

also not work for me....
in 0.***.chunk.js still has class key word and arrow function, and it breaks on IE browser

[jayeshagwan1]

Not working for me. Throws error in IE 11 modules[moduleId].call(module.exports, module, module.exports, webpack_require);. This error occurs when trying to add loadChildren as call back function instead of string. When I try to provide path as string, it errors out saying cannot find module

[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.}