Pesquisa de site

typescript - Angular 7: Erro ao construir produção: Propriedade 'value' não existe no tipo 'Component'

Eu estou criando um campo de busca. esse campo, também no ícone de limpar.

Este erro só é armazenado em cache para ng build --prod

Erro é

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

No meu código HTML

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

por que esse erro aparece no --prod?

Resposta #1

No componente, crie uma propriedade com o nome value. A build de produção também tenta encontrar propriedades que não são declaradas mas são usadas no template (pois a compilação não consegue detectar esse erro), então por que ela lança um erro.

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

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

quando você constrói uma aplicação por AOT. Ele destaca todos os erros do template HTML antes de compilar a aplicação. cada propriedade no template deve ser definida explicitamente no componente explicitamente. assim o teste realizado pelo AOT saberá o tipo exato de dado da propriedade...

Artigos relacionados