Failed to execute 'setAttribute' on 'Element': Angular 11

Question

I'm getting following error in my new Angular 11 app. Could not found any syntax errors.

core.js:6156 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-Dev Portal' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.setAttribute (http://localhost:8080/admin/vendor.js:62217:16)
    at setNgReflectProperty (http://localhost:8080/admin/vendor.js:38053:26)
    at setNgReflectProperties (http://localhost:8080/admin/vendor.js:38078:13)
    at elementPropertyInternal (http://localhost:8080/admin/vendor.js:38001:13)
    at Module.ɵɵproperty (http://localhost:8080/admin/vendor.js:42749:9)
    at DevMainHeaderComponent_Template (http://localhost:8080/admin/app-layout-layout-module.js:394:65)
    at executeTemplate (http://localhost:8080/admin/vendor.js:37594:9)
    at refreshView (http://localhost:8080/admin/vendor.js:37463:13)

My html template as follows,

<div class="row main-header-container">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 offset-lg-2 offset-xl-2">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-2 col-xl-2" [ngClass]="(isLoggedInUser === true)?'offset-lg-3 offset-xl-3':'offset-lg-9 offset-xl-9'">
        <select class="form-control">
          <option>English</option>
          <option>Finish</option>
        </select>
      </div>
    </div>
  </div>
</div>

TS File as follows,

export class DevMainHeaderComponent implements OnInit {

  public isLoggedInUser = true;
}

If I removed ngClass directive it works, but I cant find any issue with ngClass syntax here, even I tried hardcoded like this [ngClass]="['first']" , still getting same error.

This console error is not throwing with ng serve and working fine, only in prod it happens.

Answer 1

If your are using a condition to determine a class you should use a different syntax like so:

[ngClass]="{'first': true, 'second': true, 'third': false}"

Example:

[ngClass]="{'checked': rating > 0}"

https://angular.io/api/common/NgClass

Answer 2

I'm building my project with maven, my project name is <name>Dev Portal</name> . It contains a space. This project name is adding as attribute. And attribute cannot contains space.

<!--bindings={
  "ng-reflect-Dev Portal": "true"
}-->

Removing space from name resolved the problem <name>DevPortal</name> With Angular 9 this behavior was not there.