Angular 7 : Build Prod Error: Property 'value' does not exist on type 'Component'

Question

I am create one search input. that, input on clear icon also.

This Error only cached for ng build --prod

Error is

ERROR in src\app\menu\sidebar\sidebar.component.html(4,88): : Property 'value' does not exist on type 'SidebarComponent'.
src\app\menu\sidebar\sidebar.component.html(5,28): : Property 'value' does not exist on type 'SidebarComponent'.
src\app\menu\sidebar\sidebar.component.html(4,88): : Property 'value' does not exist on type 'SidebarComponent'.

In my HTML Code

<h4 class="col my-2">Application List</h4>

<mat-form-field class="col">                
        <input class="search" matInput type="text"  placeholder="Search" [(ngModel)]="value" ><!--This is search input-->
        <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
          <mat-icon>close</mat-icon>
        </button>
</mat-form-field>

<mat-list *ngFor="let app of applist" class="applist" #applist>    

            <a mat-list-item routerLink="." routerLinkActive="active">
                <mat-icon color="primary" class="mr-1">album</mat-icon>
                {{app}}
            </a>

    </mat-list>

why this error show on --prod?

Answer 1

In the component create a property with name value. Production build tries also to find properties which are not declared but used in the template (cause compilation can't catch this error), so why it throws an error.

@Component({
   ...
})
export class SideBarComponent {
   ...
   value: any;
   ...
}

Answer 2

// component.ts


export class ProductFormComponent implements OnInit {
  categories$: Observable<any>;
  id: string;
  product: any = {};   //type of product should be any or proper interface of product so then compiler will know the type of value property...
  title: any;
}

// HTML Template......

<form #f="ngForm" (ngSubmit)="save(f.value)">
            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product.value" name="title" id="title" type="text"
                    class="form-control" required>
                <div class="alert  alert-danger" *ngIf="title.touched && title.invalid">
                    Title is required!!!
                </div>
            </div>
</form>

when you build an application by AOT. It highlights all HTML template mistakes before compiling application. every property in template should be defined explicitly in component explicitly. so the tester performed by AOT will know the exact data type of property...