ng serve/ng build正常，ng build --prod报Property 'title'不存在错误

我来帮你搞定这个问题！这个报错本质是生产构建（ng build --prod）启用了更严格的TypeScript类型检查，而你的代码在类型定义上存在模糊性，导致严格检查触发了错误。而ng serve默认的开发模式下，类型检查的规则没那么严苛，所以没暴露这个问题。

问题根源 #

你把recipe初始化为空对象{}，TypeScript会自动推断它的类型是{}（完全没有属性的空对象）。当模板里尝试访问recipe.title时，生产构建的严格类型检查会认为这个操作非法——因为空对象根本没有title属性。

解决方案（按推荐程度排序） #

1. 定义明确的Recipe接口并指定类型

这是最规范、最推荐的做法，既能解决报错，又能让代码类型更清晰：
首先在组件文件顶部定义一个符合你的Recipe结构的接口：

interface Recipe {
  title?: string; // 加`?`表示可选属性（如果新建Recipe时允许title为空）
  id?: string;
  // 按需添加其他属性，比如 ingredients、description 等
}

然后把组件里的recipe变量明确指定为Recipe类型：

export class RecipeFormComponent { 
  categories$: Observable<any>;
  recipe: Recipe = {}; // 明确类型为Recipe，TypeScript就知道它可以有title属性
  id; 
  form = new FormGroup({ 
    ingredients: new FormArray([]) 
  }); 

  // ... 构造函数和其他代码保持不变
}

如果title是必填属性，初始化时可以给个默认值，避免潜在的空值问题：

recipe: Recipe = { title: '' };

2. 使用类型断言临时绕过检查（不推荐长期使用）

如果你暂时不想定义完整的接口，可以在赋值时用类型断言告诉TypeScript返回的对象包含title属性：

if(this.id) {
  this.recipeService.get(this.id).take(1).subscribe(r => {
    this.recipe = r as { title: string }; // 断言r是包含title的对象
  }); 
}

这个方法能快速解决报错，但不如定义接口严谨，容易埋下类型隐患。

3. 调整TypeScript配置降低检查强度（不推荐）

你可以修改tsconfig.json，把strictTemplates设为false，或者调整strict相关选项来关闭严格检查。但这会让TypeScript失去发现潜在bug的能力，不建议在生产项目中这么做。

为什么你之前实现接口没解决？ #

大概率是你只定义了接口，但没有把recipe变量的类型指定为这个接口——比如你只是写了interface Recipe {}，但recipe = {}依然被TypeScript推断为空对象类型，没有关联到你定义的接口。只要给recipe加上: Recipe的类型标注，问题就解决了。

内容的提问来源于stack exchange，提问作者MortiMonster28