Angular 9 | Can't bind to 'loading' since it isn't a known property of 'img'

I'm using Angular 9 and I'm simple trying to bind the attribute "loading" of the img element to a Angular property. This works if I run the app in dev mode, but not in prod mode.

In my template I have this:

<img [src]="image" [loading]="loading" [alt]="title">

And in the component I have this:

import { Component, OnInit, Input } from '@angular/core';

@Component(
{
    selector: 'image-card',
    templateUrl: './image-card.component.html',
    styleUrls: ['./image-card.component.scss'],
})
export class ImageCardComponent implements OnInit
{
    @Input() loading:"lazy" | "eager" = "lazy";
    @Input() title:string;
    @Input() image?:string;

    constructor() { }

    ngOnInit() 
    {
        this.image = this.image || "assets/images/default_image.jpg";
    }
}

This is working on a dev build/ng serve, but if I run a prod build:

ng build --prod

I get the error:

Can't bind to 'loading' since it isn't a known property of 'img'.

The property exists, https://caniuse.com/#search=loading why I'm getting the error?

How can I exclude this validation/restriction on a prod build?

For example the alt bind works fine with no errors.

EDIT: to include better code samples.

Solution

The loading attribute for images is pretty new, not supported by all browsers yet, and not Angular either. So you should try to use the [attr.loading]="loading" syntax until Angular considers this as a native HTML attribute.