AOT compile error via angular-cli, conflict with HTML attribute data-on-color

Viewed 311

I ran this cmd ng build --prod, but I got this error Property 'brand' does not exist on type.

No idea why does data-on-color="brand" HTML attribute related to this.

I have tried to rename all data-on-color="brand" to something else. Eg. data-lon-color="brand" and then AOT compilation is working.

error image

Below is the content of 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');

    }

}
1 Answers
Related