Unable to view AngularJS 2.0 Beta 1 in Internet Explorer: The use of a keyword for an identifier is invalid

[kneuse]

I am unable to render AngularJS 2.0 Beta 1 in Internet Explore.

I have stripped down a page to as small as possible and can reproduce the issue where all I have as an empty app component that references an html page.

Downgrading to Angular JS 2.0 Beta 0 resolves the issue.

Below is the stack trace of the error:

HTML1300: Navigation occurred.
File: localhost:8000
EXCEPTION: SyntaxError: The use of a keyword for an identifier is invalid
EXCEPTION: SyntaxError: The use of a keyword for an identifier is invalid
STACKTRACE:
SyntaxError: The use of a keyword for an identifier is invalid
at evalExpression (http://localhost:8000/lib/js/angular2.dev.js:452:5)
at TemplateCompiler.prototype._createViewFactoryRuntime (http://localhost:8000/lib/js/angular2.dev.js:23969:9)
at Anonymous function (http://localhost:8000/lib/js/angular2.dev.js:23924:13)
at run (http://localhost:8000/lib/js/angular2-polyfills.js:138:7)
at Anonymous function (http://localhost:8000/lib/js/angular2.dev.js:13247:15)
at zoneBoundFn (http://localhost:8000/lib/js/angular2-polyfills.js:111:7)
at lib$es6$promise$$internal$$tryCatch (http://localhost:8000/lib/js/angular2-polyfills.js:1511:9)
at lib$es6$promise$$internal$$invokeCallback (http://localhost:8000/lib/js/angular2-polyfills.js:1523:9)
at Anonymous function (http://localhost:8000/lib/js/angular2-polyfills.js:2071:13)
at Anonymous function (http://localhost:8000/lib/js/angular2-polyfills.js:243:5)

-----async gap-----
Error
at _getStacktraceWithCaughtError (http://localhost:8000

SyntaxError: The use of a keyword for an identifier is invalid
{
[functions]: ,
proto: { },
description: "The use of a keyword for an identifier is invalid",
message: "The use of a keyword for an identifier is invalid",
name: "SyntaxError",
number: -2146827240,
stack: "SyntaxError: The use of a keyword for an identifier is invalid
at evalExpression (http://localhost:8000/lib/js/angular2.dev.js:452:5)
at TemplateCompiler.prototype._createViewFactoryRuntime (http://localhost:8000/lib/js/angular2.dev.js:23969:9)
at Anonymous function (http://localhost:8000/lib/js/angular2.dev.js:23924:13)
at run (http://localhost:8000/lib/js/angular2-polyfills.js:138:7)
at Anonymous function (http://localhost:8000/lib/js/angular2.dev.js:13247:15)
at zoneBoundFn (http://localhost:8000/lib/js/angular2-polyfills.js:111:7)
at lib$es6$promise$$internal$$tryCatch (http://localhost:8000/lib/js/angular2-polyfills.js:1511:9)
at lib$es6$promise$$internal$$invokeCallback (http://localhost:8000/lib/js/angular2-polyfills.js:1523:9)
at Anonymous function (http://localhost:8000/lib/js/angular2-polyfills.js:2071:13)
at Anonymous function (http://localhost:8000/lib/js/angular2-polyfills.js:243:5)"
}

[kneuse]

The Internet Explorer version is 11 (11.0.9600.18125CO) with rendering engine set to Edge.

[VeselovAndrey]

Same for me. Here is the example in Plunker. It will works in IE 11/10 only if you change all "beta.1" to "beta.0"
http://plnkr.co/edit/wqvzQ4Ma4F1avHqwsIUd?p=preview

[kneuse]

I am not sure how you found bug #213, I specifically tried "The use of a keyword for an identifier is invalid" as a search criteria and found nothing. Anyways, I updated the title just in-case the body of these bug reports are not very searchable.

[kneuse]

I see why I never found it, because I searched angular/angular rather than angular.

[alexi2014]

Same with me. And if my root component contains another component in its view markup then I also get the "SyntaxError: Expected ';'" exception. This happens only in IE11 (ok in Chrome/FF/Edge) and it was not the issue in Beta.0.
The "The use of a keyword for an identifier is invalid" happens in the 'evalExpression' function in its last line starting with 'return new (Function......', line 452 in angular2.dev.js.

[dtabuenc]

I think the vars argument array is suspect. While debugging in IE 11 I see keys such as:

function RouterLink(_router, _location) {\r"
and
function RouterOutlet(_elementRef, _loader, _parentRouter, nameAttr) {\r

I don't know how or why they are there, but these keys are then used to populate the fnArgNames array which are used to create the new function arguments hence triggering the "The use of a keyword for an identifier is invalid", which I assume is because we are trying to name a function parameter function RouterLink(_router,_location){\r

[dtabuenc]

I further traced it down to directive name in the metadata being incorrect. For some reason in IE11 dirMmeta.type.name for a router directive is being set to function RouterLink(_router, _location) {\r" while in chrome it is simply RouterLink

[dtabuenc]

While trying to figure out why the compiler was creating incorrect directive metadata, the issue just suddenly fixed itself on my computer and everything works. For those who are still experiencing the issue, can you try fully clearing cache or using incognito mode to see if it still reproduces? Anybody have any insight as to why the type name of a directive would include the first line of the entire function declaration?

[eelwayadmin]

Same here for me. I got just a simple view, and that fails on IE11.

[cyberstorm256]

I tried your example from plunker, it works in Chrome but not in IE (11.0.9600.18097). Having the same issue "SyntaxError: The use of a keyword for an identifier is invalid" on "angular2.dev.js:452:5":
return new (Function.bind.apply(Function, [void 0].concat(fnArgNames.concat(fnBody))))().apply(void 0, fnArgValues);

Clearing IE cache didn't solve the problem.

Using angular2 beta 0 I get the same error but at a different location.. angular2.dev.js:23969:9:
return lang_1.evalExpression("viewFactory_" + compMeta.type.name, viewFactoryExpr, declarationsWithoutImports, mergeStringMaps([vars, change_detector_compiler_1.CHANGE_DETECTION_JIT_IMPORTS, proto_view_compiler_1.PROTO_VIEW_JIT_IMPORTS, view_compiler_1.VIEW_JIT_IMPORTS]));

[Tragetaschen]

Dup of #6450?

[dlebedynskyi]

+1. beta.0 is fine thought.

[zybreak]

+1
Downgrading to beta.0 fixed it for me as well

[Tragetaschen]

Ok, mine is the dup :)

Let me just quote #6450 for reference:

In beta.1 (so 7ae23ad is likely the culprit) in IE11, the generated JavaScript from jitting contains syntax errors:

var appProtoView0_function SvgDefsImpl() {}0 = AppProtoView.create(resolvedMetadataCache, 1, [], {});
var renderType56_function SvgDefsImpl() {} = null;
var styles57_function SvgDefsImpl() {} = styles;

Instead of a sanitized name, function SvgDefsImpl() {} appears in the variable names on virtually every line.

[sanbornc]

I found that in lang.ts, the stringify function returns the entire first line of the token when the token.name is undefined (IE does not support function.name) so the returned value is function functionName(arg) { Therefore the identifier is named function which is, of course, a keyword.

I have verified that the problem is fixed if I add the following:

if(typeof token === 'function') {
    return /^function\s+([\w\$]+)\s*\(/.exec(token.toString())[1];
}

to the stringify function, but it seems like it might be more appropriate to create an IE specific shim to address the missing name property.

[marclaval]

We have this shim in the repo as function.name is used in some tests:
https://github.com/angular/angular/blob/master/modules/angular2/src/testing/shims_for_IE.js#L1-L14
Does it solve the issue if it is added to the application?

[justindujardin]

@Mlaval I have been using your IE shims file for my tests on sauce labs, and my builds are still broken on all versions of IE with Beta 1.

I'm not sure I can create a Plunkr of it, but you can see my Travis/Sauce sadness here: https://travis-ci.org/justindujardin/ng2-material/builds/103002845

Here's the (sparse) stack trace information:

LOG: SyntaxError{description: 'Expected ')'', number: -2146827282, stack: 'SyntaxError: Expected ')'
   at evalExpression (Unknown script code:427:5)
   at _createViewFactoryRuntime (Unknown script code:179:13)
   at Anonymous function (Unknown script code:140:21)
   at run (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:120:7)
   at zoneBoundFn (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:93:7)
   at lib$es6$promise$$internal$$tryCatch (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:1493:9)
   at lib$es6$promise$$internal$$invokeCallback (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:1505:9)
   at Anonymous function (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:2053:13)
   at Anonymous function (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:225:5)
   at run (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:120:7)
   at zoneBoundFn (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:93:7)
   at lib$es6$promise$asap$$flush (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:1287:9)
   at Anonymous function (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:475:11)
   at Anonymous function (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:100:7)
   at run (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:120:7)
   at zoneBoundFn (http://localhost:9876/base/node_modules/zone.js/dist/zone-microtask.js?2c40f1490bd97f0e177fa1ec2a3c3000d0f08bd4:93:7)'}

[sanbornc]

Adding the function name shim in
https://github.com/angular/angular/blob/master/modules/angular2/src/testing/shims_for_IE.js#L1-L14
Solves the issue for me.

[jkristia]

I'm not sure if this is fixed or not (hard to follow the thread), but I see the same issue on IE 11 (11.162.10586.0 Win 10). 2.0.0-beta.7

[pranavgawri]

As suggested, fixed it by adding https://github.com/angular/angular/blob/master/modules/angular2/src/testing/shims_for_IE.js#L1-L14 to the code.

[SethDavenport]

Any particular reason these shims aren't part of angular-polyfills? I'm a bit reluctant to pull code from the bowels of the lib since it feels 'unofficial'. Also the current shims_for_IE doesn't work very well with webpack. I'll use a <script> tag for now but guidance on the 'correct' approach would be appreciated.

[ericmartinezr]

@SethDavenport that's being discussed over here #7390

[user414]

@SethDavenport, people over at angular webpack starter project have made a

https://github.com/gdi2290/ie-shim
https://github.com/AngularClass/angular2-webpack-starter

project that can be integrated in webpack. If you look at their config file they use it in there. However, it doesn't have the @justindujardin version but the original one with causes some problem with the regexp. I'm assuming @gdi2290 might be waiting for the pull reference above before updating that file... I personally just patch the code myself until it all gets squared off.

[SethDavenport]

Thanks, I'll check it out. In my case it turned out to be tsconfig settings that were messing webpack up.

[SethDavenport]

@user414 FWIW I ended up doing this: https://github.com/rangle/angular2-redux-starter/pull/81/files

• Got similar polyfills for classlist, requestAnimationFrame, and console from npm: probably a bit more code but with better packaging and more clarity on licensing.
• Added an additional polyfill for history.pushState which is needed for IE9.
• Adopted @justindujardin's variant of function.name for now.

Thanks for the tips.

[alexeagle]

Looks to me like there are a few issues lumped together here, can someone clarify?

• IE doesn't implement function.name
• angular 2 stringifies things into a form that contains keywords like 'proto'
• angular 2 stringifies functions into function (arg) {

In #7825 I fixed the latter one, only in the case of the template compiler doing codegen (because we found that closure compiler drops class names when lowering es6 to es5). If you're using TypeScript or Babel to produce ES5, you don't have this problem.

Also my fix produces an opaque identifier like anonymous_function_0_ which means debugging is harder. We should avoid that as a general solution, and try to get the name of the function (or class) to propagate all the way to the string form.

[CaptainCodeman]

My IE experience:

I use the modified IE shim that @justindujardin posted above

Other than that, everything else comes from a polyfill service (to also support Safari with Intl) and core.js (which is only required by IE).

The only pieces of core.js actually needed by IE appear to be:

core-js/es6/array
core-js/es6/map
core-js/es6/string
core-js/es6/symbol

But this was pre-zone 0.6.8 / beta.13 fixes where I now pull in zone directly instead of using angular2-polyfills. So core.js is also now supplying reflect-metadata as well so I just pull in core.js from a CDN for the time being instead of trying to load a cut-down version of it.

Everything is built with webpack and uglified but without mangle. Source here in case it helps anyone: https://github.com/CaptainCodeman/angular2-webpack-polyfill

[PatrickJS]

here's the mangle config to get everything working with minify

mangle: {
  screw_ie8 : true,
  keep_fnames: true
}

[CaptainCodeman]

here's the mangle config to get everything working with minify

Thanks you so much - that works great !!

(although strangely, it seems to have less of an impact on large codebases than smaller ones)

[mhevery]

Fixed by #6944

[dlebedynskyi]

kneuse commented on Jan 15
@mhevery closes on May 20.
label for issue still effort1: easy (hour).
Thanks for fix!

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