Angular结合Bootstrap动画时出现Cannot read properties of undefined错误

错误核心原因 #

触发这个错误的直接原因是animationUtils.ts里的result变量只声明但未初始化，始终处于undefined状态，当代码尝试访问result[index]时，自然会抛出“无法读取undefined的属性”的错误。

分步修复方案 #

1. 初始化结果对象 #

在animationUtils.ts中，把未初始化的result改成空对象：

// 原代码
let result : any;
// 修复后
let result: {[key: string]: string | number} = {};

2. 修正类型转换错误 #

代码里错误地把样式规则转换成了CSSStyleSheet（样式表），实际上应该转换为CSSStyleRule（单个样式规则）：

// 原错误代码
let styleRule = rules[j] as unknown as CSSStyleSheet;
// 修复后
let styleRule = rules[j] as CSSStyleRule;

3. 启用样式赋值逻辑 #

之前被注释掉的样式赋值代码需要取消注释，否则函数返回空对象，拿不到任何Bootstrap样式：

// 取消注释这一行
result[index] = styleRule.style[index];

4. 处理跨域样式表限制 #

如果Bootstrap是通过CDN引入的，浏览器同源策略会阻止访问样式表的rules/cssRules属性，导致无法读取样式。这种情况下建议把Bootstrap下载到本地项目中引入，绕过跨域限制。

修复后的完整animationUtils.ts代码 #

export function getStylesFromClasses(names: string | string[], elementType: string="div") : {[key: string]: string | number} { 
  let elem = document.createElement(elementType); 
  (typeof names == "string" ? [names]:names).forEach(c => elem.classList.add(c)); 
  // 初始化结果对象
  let result: {[key: string]: string | number} = {}; 
  for (let i =0; i < document.styleSheets.length; i++){ 
    let sheet = document.styleSheets[i] as CSSStyleSheet; 
    // 捕获跨域样式表的访问异常，跳过无法读取的表
    try {
      let rules = sheet.rules || sheet.cssRules; 
      for (let j =0; j< rules.length; j++){ 
        if(rules[j].type == CSSRule.STYLE_RULE){ 
          let styleRule = rules[j] as CSSStyleRule; 
          if (elem.matches(styleRule.selectorText)){ 
            for (let k = 0; k < styleRule.style.length; k++){ 
              let index: any = styleRule.style[k];
              // 赋值样式属性到结果对象
              result[index] = styleRule.style[index]; 
            } 
          } 
        } 
      }
    } catch(e) {
      continue;
    }
  } 
  return result; 
}

额外提示 #

• Angular动画的style()方法要求样式键用驼峰命名（比如backgroundColor而非background-color），不过styleRule.style[index]返回的已经是驼峰格式，无需额外转换。
• 可以先简化测试：直接返回一个包含bg-success样式的硬编码对象，确认动画正常运行后，再用修复后的函数读取真实样式。

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