Search code examples
angularinternet-explorerstrict

Multiple definitions of a property not allowed in strict mode - Angular


I ran into this in my Angular (6) project in IE, which caused the app to not load. It only occurred in the prod build of the app, which is concatenated and minified by Angular. The local dev version running under 'ng serve' did not cause the issue. This error was in the Chrome dev console:

SCRIPT1046: Multiple definitions of a property not allowed in strict mode
File: main.51c74b0704ecaa189364.js, Line: 1, Column: 1263758

Here was the location in the minified main script it was referring to:

(6,{"col-6":0,"col-6":1})

Solution

  • I found I had a few places where my ngClass was setting the same class for different evaluations. I have a common library function mobile() which I use to determine if we are on a mobile device or small desktop, and set my classes accordingly (particularly Bootstrap columns, margins, padding, etc). For instance:

    <div [ngClass]="{'col-12': mobile(), 'col-6': !mobile()}">
    

    There were a few places where I had used the same class for both cases, like below:

    <div [ngClass]="{'col-6': mobile(), 'col-6': !mobile()}">                            
    

    I realize Bootstrap has classes such as col-sm-6 and col-md-6 to enable similar variations, but that's irrelevant here. The classes could be named 'foo', if both cases were assigned that same class, that's what was causing the problem. Once I refactored the above to just use a class, it was fine.

    <div class='col-6'>
    

    As far as a root cause goes, I have no idea but welcome any input. Strangely I once ran into a compiler error due to this (Duplicate identifier ''col-6'') that broke the build. But there were no compiler errors in this code, it built and deployed clean and only affected IE. The only way I found it was by looking for some unminified HTML text near the error to get an idea of where to start looking.