title: Problems with angular deployment and undefined properties in angular
body: <p>Hi right now I am able to add products to the db and it looks like they all have the properties I added to them in the db.  Unfortunately I am prevented from deploying for production because I am getting errors.  When I try to fix these errors so I can deploy it breaks and I cannot add items to the db.</p>
  
  <p>errors preventing deployment before the 'fix':</p>
  
  <pre><code>ERROR in src\app\admin\product-form\product-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
  src\app\admin\product-form\product-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.
  </code></pre>
  
  <p>In the component if I change </p>
  
  <pre><code>  product = {};
  </code></pre>
  
  <p>to </p>
  
  <pre><code>product: Product;
  </code></pre>
  
  <p>I get</p>
  
  <pre><code>Error: Cannot read property 'title' of undefined
  </code></pre>
  
  <p>and if I change it to </p>
  
  <pre><code>product: Product = {};
  </code></pre>
  
  <p>I get</p>
  
  <pre><code>  ERROR in src/app/admin/product-form/product-form.component.ts(15,5): error TS2322: Type '{}' is not assignable to type 'Product'.
    Property '$key' is missing in type '{}'.
  </code></pre>
  
  <p>component:</p>
  
  <pre><code> import { Component, OnInit } from '@angular/core';
  import { CategoryService } from '../../category.service';
  import { ProductService } from '../../product.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import 'rxjs/add/operator/take';
  
  @Component({
    selector: 'app-product-form',
    templateUrl: './product-form.component.html',
    styleUrls: ['./product-form.component.css']
  })
  export class ProductFormComponent implements OnInit {
    categories$;
    product = {};
    id;
  
    constructor(
      private router: Router,
      private route: ActivatedRoute,
      private categoryService: CategoryService,
      private productService: ProductService
    ) {
      this.categories$ = categoryService.getAll();
  
      this.id = this.route.snapshot.paramMap.get('id');
      if (this.id) {
        this.productService
          .get(this.id)
          .take(1)
          .subscribe(p =&gt; (this.product = p));
      }
    }
  
    save(product) {
      if (this.id) {
        this.productService.update(this.id, product);
      } else {
        this.productService.create(product);
      }
      this.router.navigate(['/admin/products']);
    }
  
    delete() {
      if (!confirm('Are you sure you want to delete?')) {
        return;
      }
      this.productService.delete(this.id);
      this.router.navigate(['/admin/products']);
    }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p>template:</p>
  
  <pre><code>&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"
                      tobject
                      ;product
                      'ype="text"
                      id="title"
                      class="form-control"
                      required&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"&gt;
                      &lt;div class="input-group-addon"&gt;
                          &lt;span class="input-group-text"&gt;$&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;input #price="ngModel"
                          [(ngModel)]="product.price"
                          name="price"
                          type="number"
                          class="form-control"
                          aria-label="Amount (to the nearest dollar)"
                          required
                          [min]="0"&gt;
                      &lt;div class="input-group-append"&gt;
                          &lt;span class="input-group-text"&gt;.00&lt;/span&gt;
                      &lt;/div&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 equal to or greater than zero.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="category"&gt;Category&lt;/label&gt;
                  &lt;select #category="ngModel"
                      [(ngModel)]="product.category"
                      name="category"
                      id="category"
                      class="form-control"
                      required&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"
                      type="text"
                      id="imageUrl"
                      class="form-control"
                      required
                      url&gt;
                  &lt;div class="alert alert-danger"
                      *ngIf="imageUrl.touched &amp;&amp; imageUrl.invalid"&gt;
                      &lt;div *ngIf="imageUrl.errors.required"&gt;Image URL is required.&lt;/div&gt;
                      &lt;div *ngIf="imageUrl.errors.url"&gt;Image URL must be formatted correctly.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-primary"&gt;Save&lt;/button&gt;
              &lt;button type="button"
                  class="btn btn-danger"
                  (click)="delete()"&gt;Delete&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-6"&gt;
          &lt;product-card [product]="product"
              [show-actions]="false"&gt;&lt;/product-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>product variable is defined here:</p>
  
  <pre><code>export interface Product {
    $key: string;
    title: string;
    price: number;
    category: string;
    imageUrl: string;
  }
  </code></pre>