title: Identifier 'title' is not defined. '{}' does not contain such a member angular 8
body: <p><strong>This is my component file:</strong></p>
  
  <pre><code>import { Router, ActivatedRoute } from '@angular/router';
  import { Component, OnInit } from '@angular/core';
  import { CategoriesService } from 'src/app/categories.service';
  import { ProductService } from 'src/app/product.service';
  import 'rxjs/add/operator/take';
  
  @Component({
    selector: 'app-product-forms',
    templateUrl: './product-forms.component.html',
    styleUrls: ['./product-forms.component.css']
  })
  export class ProductFormsComponent implements OnInit {
  
  categories$;
  product: {};
  
    constructor(categoryservice: CategoriesService , private productservice: ProductService , private router: Router,
                private route: ActivatedRoute) {
      this.categories$ = categoryservice.getcategories();
  
      let id = this.route.snapshot.paramMap.get('id');
      if (id) { this.productservice.get(id).take(1).subscribe(p =&gt; this.product = p); }
     }
  
     save(product) {
       this.productservice.create(product);
       this.router.navigate(['/admin/products']);
     }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>This is my html file</strong></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title &gt;Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;/html&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
  
      &lt;form #f="ngForm" (ngSubmit)="save(f.value)"&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="title"&gt;Title&lt;/label&gt;
          &lt;input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required&gt;
          ***&lt;!-- ERROR  : Identifier 'title' is not defined. '{}' does not contain such a member --&gt;***
          &lt;div class="alert alert-danger" *ngIf="title.touched &amp;&amp; title.invalid"&gt;
            Title is required
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="price"&gt;Price&lt;/label&gt;
          &lt;div class="input-group-prepend"&gt;
            &lt;span class="input-group-text"&gt;$&lt;/span&gt;
          &lt;input #price="ngModel" [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0"&gt;
        &lt;!--ERROR  :  Identifier 'price' is not defined. '{}' does not contain such a member --&gt;
        &lt;/div&gt;
          &lt;div class="alert alert-danger" *ngIf="price.touched &amp;&amp; price.invalid"&gt;
            &lt;div *ngIf="price.errors.required"&gt;Price is required&lt;/div&gt;
            &lt;div *ngIf="price.errors.min"&gt;Price must be 0 or higher than zero&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="category"&gt;Cateogary&lt;/label&gt;
          &lt;select #category="ngModel" [(ngModel)]="product.category" name="category" id="category"  class="form-control" required&gt;
  &lt;!--ERROR  :  Identifier 'category' is not defined. '{}' does not contain such a member --&gt;
            &lt;option value=""&gt;&lt;/option&gt;
            &lt;option *ngFor="let c of categories$ | async" [value]="c.$key"&gt;
  
              {{ c.name }}
  
            &lt;/option&gt;
          &lt;/select&gt;
          &lt;div class="alert alert-danger" *ngIf="category.touched &amp;&amp; category.invalid"&gt;
            Category is required
        &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="imageurl"&gt;Image Url&lt;/label&gt;
          &lt;input #imageUrl="ngModel" [(ngModel)]="product.imageurl" name="imageUrl" id="imageurl" type="text" class="form-control" required url&gt;
          &lt;!--ERROR  :  Identifier 'imageurl' is not defined. '{}' does not contain such a member --&gt;
          &lt;div class="alert alert-danger" *ngIf="imageUrl.touched &amp;&amp; imageUrl.invalid"&gt;
            &lt;div *ngIf="imageUrl.errors.required"&gt;ImageUrl is required&lt;/div&gt;
            &lt;div *ngIf="imageUrl.errors.url"&gt;ImageUrl is required&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button class="btn btn-primary"&gt;Save&lt;/button&gt;
  
        &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-6"&gt;
      &lt;div class="card" style="width: 18rem;"&gt;
        &lt;img [src]="product.imageUrl" class="card-img-top" alt="..." *ngIf="product.imageUrl"&gt;
        &lt;div class="card-body"&gt;
          &lt;h5 class="card-title"&gt; {{product.title}} &lt;/h5&gt;
           &lt;!-- ERROR  : Identifier 'title' is not defined. '{}' does not contain such a member --&gt;
          &lt;p class="card-text"&gt; {{product.price | currency:'USD':true}} &lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li><p><strong>Whenever i deploy my project i get these following errors:</strong></p>
  
  <ul>
  <li>Identifier 'imageurl' is not defined. '{}' does not contain such a member   </li>
  <li>Identifier 'title' is not defined. '{}' does not contain such a member   </li>
  <li>Identifier 'category' is not defined. '{}' does not contain such a member   </li>
  <li>Identifier 'price' is not defined.'{}' does not contain such a member </li>
  <li>Identifier 'title' is not defined. '{}' does not contain such a member</li>
  </ul></li>
  </ul>