运行ng build时，属性“ title”在类型“ {}”上不存在-虽然prod可与ng serve一起使用

Question

When I run ng serve the application run fine. When I run ng build --prod a bunch of Property does not exist on type {} errors pop up, and I cannot deploy. I believe it is because recipe = {}; When I set it just to recipe; the drop down that gets populated from the database is blank, and various other errors come up in the console on the form page.

Here is my code .ts file

import { RecipeService } from './../recipe.service';
import { Observable } from 'rxjs/Observable';
import { CategoryService } from './../category.service';
import { Component } from '@angular/core';
import { AngularFireObject, AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FirebaseListObservable } from "angularfire2/database-deprecated";
import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { FirebaseApp } from 'angularfire2';
import { RecurseVisitor } from '@angular/compiler/src/i18n/i18n_ast';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-recipe-form',
  templateUrl: './recipe-form.component.html',
  styleUrls: ['./recipe-form.component.css']
})
export class RecipeFormComponent {
  categories$: Observable<any>;
  recipe = {};
  id;

  form = new FormGroup({
    ingredients: new FormArray([])
  });

  constructor(
    private categoryService: CategoryService, 
    private recipeService: RecipeService,
    private router: Router,
    private route: ActivatedRoute) {

    this.categories$ = categoryService.getCategories();
    this.id = this.route.snapshot.paramMap.get('id');
    if(this.id) this.recipeService.get(this.id).take(1).subscribe(r => this.recipe = r);
   }

   save(recipe){
      recipe.ingredientsList = this.form.value;
      if(this.id) this.recipeService.update(this.id, recipe);
      else this.recipeService.create(recipe);
      this.router.navigate(['/recipes']);
      //  console.log(recipe);     
    }



  addIngredient(ingredient: HTMLInputElement) {
    this.ingredients.push(new FormControl(ingredient.value));
    ingredient.value = '';
  }

  getList(){
    return this.form.get('ingredients') as FormArray;
  }

  get ingredients() {
    return this.form.get('ingredients') as FormArray;
  }


  removeIngredient(ingredient: FormControl){
    let index = this.ingredients.controls.indexOf(ingredient);
    this.ingredients.removeAt(index);
  }
}

Here is the html form:

<div class="row">
  <div class="col-md-6">
    <form #f="ngForm" (ngSubmit)="save(f.value)">
      <div class="form-group">
        <label for="title">Title</label>
        <input #title="ngModel" [(ngModel)]="recipe.title" 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>

      <div class="form-group">
          <label for="source">Recipe Source</label>
          <input #source="ngModel" [(ngModel)]="recipe.source" name="source" id="source" type="source" class="form-control" required>
          <div class="alert alert-danger" *ngIf="source.touched && source.invalid">
            Source is required
          </div>
        </div>

      <div class="form-group">
        <label for="category">Category</label>
        <select #category="ngModel" [(ngModel)]="recipe.category" name="category" id="category" class="form-control" required>
          <option value=""></option>
          <option *ngFor="let c of categories$ | async" [value]="c.key">
            {{ c.name }}
          </option>      
        </select>
        <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
          Category is required
        </div>
      </div>

      <div class="form-group">
        <label for="ingredientsList">Ingredients</label>
        <div class="input-group mb-3">
          <input #ingredientsList="ngModel" ngModel name="ingredientsList" id="ingredientsList" type="text" class="form-control" (keyup.enter)="addIngredient(ingredient)" #ingredient required>
          <div class="input-group-append">
            <button type="button" class="input-group-text fa fa-plus" (click)="addIngredient(ingredient)"></button>
          </div>
        </div>
          <div *ngIf="recipe.ingredientsList">
            <ul class="list-group">
              <li 
                *ngFor="let i of recipe.ingredientsList.ingredients"
                (click)="removeIngredient(i)"                
                class="list-group-item">
                {{ i }}
              </li>
            </ul>
          </div>

          <ul class="list-group">
            <li
              *ngFor="let i of ingredients.controls"
              (click)="removeIngredient(i)"
              class="list-group-item">
              {{ i.value }}
            </li>
          </ul>
        <div class="alert alert-danger" *ngIf="ingredientsList.touched && ingredientsList.invalid">
          Ingredients are required
        </div>
      </div>

      <div class="form-group">
          <label for="directions">Directions</label>
          <textarea #directions="ngModel" [(ngModel)]="recipe.directions" name="directions" id="directions" class="form-control"  rows="3" required></textarea>
          <div class="alert alert-danger" *ngIf="directions.touched && directions.invalid">
              Directions are required
          </div>
      </div>

      <div class="form-group">
        <label for="imageUrl">Image URL</label>
        <input #imageUrl="ngModel" [(ngModel)]="recipe.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url>
        <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
          <div *ngIf="imageUrl.errors.required">Image URL is required</div>
          <div *ngIf="imageUrl.errors.url">Please enter valid URL</div>      
        </div>
      </div>

      <button (click)="save(f.value)" type="button" class="btn btn-primary">Save</button>
    </form>
  </div>

  <div class="col-md-6">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" [src]="recipe.imageUrl" *ngIf="recipe.imageUrl">
      <div class="card-body">
        <h5 class="card-title">{{ recipe.title }}</h5>
        <p class="card-text">{{ recipe.source }} </p>
      </div>
    </div>
  </div>  
</div>

Answer 1

I think what Pengyy is saying is to create an interface (or class) for the property. Please see code below:

export class Recipe implements IRecipe {
    source: any;
    ingredients: any[];
}

export interface IRecipe {
    source: any;
    ingredients: any[];
}

export class RecipeFormComponent {
    categories$: Observable<any>;
    recipe: Recipe;
}

I think you can also set the recipe property to the any type. Please see below:

export class RecipeFormComponent {
    categories$: Observable<any>;
    recipe: any;
}