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

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)"
}

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

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

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.

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

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.

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

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

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?

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

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]));

Dup of #6450?

+1. beta.0 is fine thought.

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

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.

@SethDavenport

@SethDavenport that's being discussed over here #7390

@SethDavenport

@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.

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

@user414

@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.

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.

@justindujardin

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

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

mangle: {
  screw_ie8 : true,
  keep_fnames: true
}

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)

Fixed by #6944

@mhevery

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

Clean up (#1041)

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

Navigation Menu

Repository navigation

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

52 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

kneuse commented on Jan 15, 2016

VeselovAndrey commented on Jan 15, 2016

kneuse commented on Jan 15, 2016

kneuse commented on Jan 15, 2016

alexi2014 commented on Jan 15, 2016

dtabuenc commented on Jan 15, 2016

dtabuenc commented on Jan 15, 2016

dtabuenc commented on Jan 15, 2016

eelwayadmin commented on Jan 16, 2016

cyberstorm256 commented on Jan 18, 2016

Tragetaschen commented on Jan 19, 2016

dlebedynskyi commented on Jan 19, 2016

zybreak commented on Jan 20, 2016

52 remaining items

SethDavenport commented on Mar 22, 2016

ericmartinezr commented on Mar 22, 2016

user414 commented on Mar 23, 2016

SethDavenport commented on Mar 23, 2016

SethDavenport commented on Mar 23, 2016

alexeagle commented on Mar 31, 2016

CaptainCodeman commented on Mar 31, 2016

PatrickJS commented on Mar 31, 2016

CaptainCodeman commented on Mar 31, 2016

mhevery commented on May 20, 2016

dlebedynskyi commented on May 21, 2016

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions