执行ng build --prod --build-optimizer时LoginInfoComponent缺失email属性报错

嘿，这个问题我太熟了——Angular生产构建时的这个属性缺失错误，本质就是TypeScript在严格编译模式下，发现你的模板用了组件类里没定义的email属性。咱们一步步来搞定它：

第一步：给组件类补上缺失的属性 #

打开你的login-info.component.ts文件，在LoginInfoComponent类里加上email和password这两个属性，最好给它们加上类型注解并初始化空字符串，避免后续出现undefined的问题：

import { Component } from '@angular/core';

@Component({
  selector: 'app-login-info',
  templateUrl: './login-info.component.html',
  styleUrls: ['./login-info.component.css']
})
export class LoginInfoComponent {
  // 补上模板用到的两个属性
  email: string = '';
  password: string = '';

  subMit(email: string, password: string) {
    // 这里写你的提交逻辑就行
    console.log('用户邮箱:', email, '密码:', password);
  }
}

第二步：修复模板里的语法小问题 #

我注意到你提供的模板中，email对应的input标签有个语法错误：

<input class="form-control input-sm" id="inputsm" type="text[(ngModel)]=email>

这里type="text"和[(ngModel)]之间没加空格，而且绑定值也没加引号，正确的写法应该是这样：

<input class="form-control input-sm" id="inputsm" type="text" [(ngModel)]="email">

第三步：验证修复结果 #

改完之后先跑ng serve在开发环境测一下，确保页面能正常渲染、双向绑定生效，然后再执行ng build --prod --build-optimizer做生产构建，这个属性缺失的错误应该就消失啦。

另外提醒一句，如果你的项目开了Angular严格模式（tsconfig.json里strict: true），TypeScript会对这类模板与组件的属性匹配做更严格的校验，所以以后写模板时，一定要确保用到的属性都在组件类里明确定义哦。

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