CODEWITHSUNDEEP
compiler-errorsivyangular9
keschra
keschra

Reputation: 338

Angular Compiler Error after update to Version 9

After upgrading to Angular 9 i get a strange compiler error. I have updated 4 projects, 3 without any problems but the last one throws this error:

ERROR in Error: [class] and [className] bindings cannot be used on the same element simultaneously
    at StylingBuilder.registerClassInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13564:27)
    at StylingBuilder.registerInputBasedOnName (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13527:36)
    at StylingBuilder.registerBoundInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13503:36)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17296:57
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.visitElement (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17295:28)
    at Element.visit (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4268:71)
    at visitAll (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4435:40)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16982:13)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:37)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)

I have no idea what is causing this error, has anybody any idea?

Upvotes: 3

Views: 1417

Answers (5)

jmuhire
jmuhire

Reputation: 2211

I had issue when a class attribute was defined next to [class]. It was really hard to find the source in a large codebase as the error log is not explicit !

The issue was :

<i class="menu-icons-style" [class]="topBarElement.class"></i>

The fix was to simply use ngClass instead :

<i class="menu-icons-style" [ngClass]="topBarElement.class"></i>

Upvotes: 1

iamaword
iamaword

Reputation: 1499

I had an issue where I had to track down an occurrence of a double class on a massive application (yikes). this regex in vs-code helped a ton.

search with regex enabled:

class=".*".*class  // single line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on a new line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on the second line away

I wasn't sure of a great way to deal with the classes occuring on variable lines, so I just added another iteration of [^>\r\n]*(\r\n|\r|\n) before the second class keyword.

Hope it helps someone else!

Upvotes: 3

Javier Vidal
Javier Vidal

Reputation: 1331

The error is quite clear but it's difficult to find where exactly it has been generated.

In my case the offending template that was something like:

<div class="classA {{ some_object.propertyB }}"
     [class.classC]="some_object.propertyC">

and I have fixed it converting it to:

<div class="classA" [ngClass]="{
     'classX': some_condition,
     'classC': some_object.propertyC}">

Basically, I have had to move all the bindings to a single ngClass.

A link that might be usefull:

Upvotes: 2

keschra
keschra

Reputation: 338

I checked my code and found the reason for the error. It was a html element with two regular class decorators. Just a simple copy issue, but ivy doesn't seem to like it :D

Upvotes: 5

Thariel
Thariel

Reputation: 21

Search your project for every html element with [class] AND [className] in it. In my case it was an older plugin (in node_modules) that was not yet adapted to Angular 9. After I removed [className] (I don't need it), it worked fine. Hint was that the compiling stoppped at the plugin which had the error.

Upvotes: 2

Related Questions