typescript - Angular 7 : Üretim Derleme Hatası: 'value' özelliği 'Component' türünde mevcut değil

Bir arama girişi oluşturuyorum. Bu, girişin temizleme simgesi de olacak.

Bu Hata yalnızca ng build --prod için önbelleğe alındı

Hata şudur

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'.

HTML Kodumda

<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>

Bu hata neden --prod üzerinde gösteriliyor?

Cevap #1

Bileşende, adı value olan bir özellik oluşturun. Üretim derlemesi, şablonda kullanılan ancak bildirilmeyen özellikleri de bulmaya çalışır (çünkü derleme bu hatayı yakalayamaz), bu yüzden neden bir hata veriyor.

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

Cevap #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>

AOT ile bir uygulama oluşturduğunuzda. Uygulamayı derlemeden önce tüm HTML şablon hatalarını vurgular. Şablondaki her özellik, komponent içinde açıkça tanımlanmalıdır. Böylece AOT tarafından yapılan test, özelliğin tam veri türünü bilir...

İlgili makaleler