AOT compilation error via angular-cli, conflict with HTML data attribute on color
I ran this cmd ng build --prod
but got this error Property 'brand' does not exist on type
.
Not sure why this data-on-color = "brand" HTML attribute is related to this.
I tried to rename everything data-on-color="brand"
to something else. For example. data-lon-color="brand"
and then AOT compilation works.
Below is the content of the file /theme/angular/default/src/app/theme/pages/components/base/base-bootstrap-notify/base-bootstrap-notify.component.html
as stated in the error.
<div class="form-group m-form__group row">
<label class="col-form-label col-lg-3 col-sm-12">
URL Clickable
</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<input data-switch="true" type="checkbox" data-on-color="brand" id="m_notify_url">
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-form-label col-lg-3 col-sm-12">
Allow dismiss
</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<input data-switch="true" type="checkbox" checked data-on-color="brand" id="m_notify_dismiss">
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-form-label col-lg-3 col-sm-12">
Pause on hover
</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<input data-switch="true" type="checkbox" data-on-color="brand" id="m_notify_pause">
</div>
</div>
Below is the .ts file BaseBootstrapNotifyComponent
import {Component, OnInit, ViewEncapsulation} from '@angular/core'; import {ScriptLoaderService} from '../../../../../_services/script-loader.service'; @Component({ selector: "app-base-bootstrap-notify", templateUrl: "./base-bootstrap-notify.component.html", styleUrls: ["./base-bootstrap-notify.component.scss"], encapsulation: ViewEncapsulation.None, }) export class BaseBootstrapNotifyComponent implements OnInit { constructor(private _script: ScriptLoaderService) { } ngOnInit() { } ngAfterViewInit() { this._script.load('app-base-bootstrap-notify', 'assets/demo/default/custom/components/base/bootstrap-notify.js'); } }
source to share
Angular normalizes attribute name when parsing template
private _normalizeAttributeName(attrName: string): string { return /^data-/i.test(attrName) ? attrName.substring(5) : attrName; }
So your becames string
<input on-color="brand">
Note: <div data-*ngIf="3">Hello</div>
will even work without issue.
Then angular has two options for declaring events
1) (event)
2) on-event
Hence angular thinks you have declared an out event with color
name
<input (color)="brand">
and for aot you need to declare a handler brand
inside your component.
Bypass
<input [attr.data-on-color]="'brand'">
source to share