Angular 6.x not working in IE 11 - Error: Invalid argument

Question

I have an Angular 6.x app running perfectly in Chrome. The problem is when trying to run it in IE 11, I'm getting the error:

Error: Invalid argument. at DefaultDomRenderer2.prototype.setProperty...

Already tried all answers in StackOverflow that I could find with no help. I'm listing theme here so you guys won't try them as answers:

Added all polyfills needed for IE but still having the same problem.

Added in head tag:

<meta http-equiv="X-UA-Compatible" content="IE=11">

Thank you for helping.

Don't support IE11 is my advice. Seriously. If you really have to - I'd recommend updating your project to the latest version of Angular using ng update. I seem to recall they fixed an issue with some polyfills recently. — hevans900
– hevans900, Commented Dec 4, 2018 at 13:49
Can you post the Enough code to reproduce the problem as in Minimal, Complete, and Verifiable example. I have created a new angular6 sample and add the header tag, it seems that everything works well on my side. — Zhi Lv
– Zhi Lv, Commented Dec 5, 2018 at 8:00

benshabatnoam · Accepted Answer · 2019-02-14 10:32:15Z

5

I've found the problem and fixed it. I'm writing this answer to save time for others facing this problem.

The problem is binding an incorrect valued variable to an HTML attribute (any HTML attribute).

e.g.

Assigning a variable to a dir attribute in a p tag, must be defined with one of the possible values for dir attribute, which are: ltr | rtl | auto

Having this line in html: <p [dir]="myDir">Test</p>

When myDir = undefined or myDir = 'bla bla bla' or any other incorrect value - we'll get an error.

When myDir = 'rtl' or any other correct value - we won't get an error.

Added a DEMO to run in IE for seeing this error reproduced.

For conclusion I think we can say that when binding to an HTML attribute we'll have to be very careful to have a valid attribute's value, this way we won't face this problem.

edited Feb 14, 2019 at 10:32

answered Dec 6, 2018 at 22:03

benshabatnoam

7,7303 gold badges37 silver badges55 bronze badges

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

2 Comments

Wis Over a year ago

Got the exact same message using <input [type]="text"> instead of <input type="text"> (in case someone else than me comes here after googling for this exact error message). No error messages with other browsers.

John Neuhaus Over a year ago

Same, but with <textarea [rows]="rows"> My component had an invalid value (rows was "-1") but in Chrome the DOM ended up with rows="2", while in IE it was still trying to set it to "-1". Since changing it to a fn returning null for the -1 case to suppress the attribute entirely also didn't work, I ended up changing the binding to use [attr.rows], which will successfully accept null and omit the attribute.

dale · Accepted Answer · 2019-04-23 05:47:41Z

1

I also had this error when using:

const input = {
   time: 'time',
   date: 'date'
}

<input [type]="input.date"/>
<input [type]="input.time"/>

IE 11 inputs don't support types of date and time. So any element that IE doesn't support will likely throw the same error.

answered Apr 23, 2019 at 5:47

dale

1,2582 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular 6.x not working in IE 11 - Error: Invalid argument

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