Angular构建后点击事件报错：Cannot read properties of undefined (reading '3')

1. 修复模板方法调用方式 #

模板中直接传递searchParams对象给searchStudents是触发优化bug的核心原因。修改为组件内部读取参数，避免跨模板传递复杂对象：

修改 search.component.ts 的 searchStudents 方法：

searchStudents(): void {
  // 创建对象副本，避免原对象被优化器误处理
  const params = { ...this.searchParams };
  this.studentService.searchStudents(params)
    .subscribe(results => this.searchResults = results);
}

修改 search.component.html 的按钮绑定：

<button type="button" (click)="searchStudents()">Search</button>

2. 确保类型定义无歧义 #

检查SearchEntry接口，确保所有属性都明确标记为必填（或显式标记可选），避免优化器因类型模糊裁剪属性：

// 示例：明确的接口定义
export interface SearchEntry {
  lifetimeID: string;
  uni: string;
  pid: string;
  lastName: string;
  firstName: string;
  gradYear: string;
  status: string;
  entryTerm: string;
  termNumber: string;
  program: string;
  cluster: string;
}

3. 调整构建优化配置 #

如果上述修改无效，可以在angular.json中微调Terser选项，避免函数名被误删：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "buildOptimizer": true,
          "aot": true,
          "optimization": {
            "scripts": {
              "minify": true,
              "terserOptions": {
                "keep_fnames": true
              }
            }
          }
        }
      }
    }
  }
}

4. 升级Angular CLI #

旧版本Angular的buildOptimizer存在已知的死代码消除bug，升级到最新稳定版（如16.x或更高）可解决此类问题。

问题原因 #

Angular生产构建的buildOptimizer会进行激进的代码压缩和死代码消除。当模板中直接传递复杂对象、或类型定义存在歧义时，优化器可能误判这些代码为冗余并裁剪，导致运行时出现Cannot read properties of undefined错误。关闭优化时这些裁剪逻辑不生效，因此站点能正常运行。

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