Search code examples
angularinternet-explorerangular6internet-explorer-11polyfills

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

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

enter image description here

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.

Solution

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