Failed to execute ‘setAttribute’ on ‘Element’: Angular 11

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *