Angular 18集成FontAwesome 6报错：无法绑定'spin'属性

我在两台机器上开发代码，之前[spin]属性一直正常工作。近期将Angular从17升级到18，同步代码后发现一台机器仍能正常运行，另一台机器抛出如下错误：

Can't bind to 'spin' since it isn't a known property of 'fa-icon'.

1. If 'fa-icon' is an Angular component and it has 'spin' input, then verify that it is included in the '@Component.imports' of this component.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.ngtsc(-998002)

触发错误的HTML代码 #

<div class="loading"> <fa-icon [icon]="faSpinner" size="3x" [spin]="true"></fa-icon> </div>

组件代码 #

import { Component, Output, EventEmitter, Input } from '@angular/core';
import { faInputText, faPenField, faMicrochipAi, faArrowsRotate, faSpinner } from '@fortawesome/pro-regular-svg-icons';
import { CommonModule, NgClass, NgIf, NgSwitch } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@Component({
  selector: 'app-aicard',
  standalone: true,
  imports: [FontAwesomeModule, CommonModule, NgClass, NgIf, NgSwitch],
  templateUrl: './aicard.component.html',
  styleUrl: './aicard.component.scss'
})
export class AicardComponent {
  @Output() refreshEvent = new EventEmitter();
  @Input() title!: string;

  faPenField = faPenField;
  faInputText = faInputText;
  faMicrochipAi = faMicrochipAi;
  faArrowsRotate = faArrowsRotate;
  faSpinner = faSpinner;
  mode = 'user';
  previousMode = '';

  onRefresh() {
    this.refreshEvent.emit();
  }

  setMode(mode: string) {
    this.mode = mode;
  }

  setLoading() {
    if (this.previousMode === '') {
      this.previousMode = this.mode;
      this.mode = 'loading';
    } else {
      [this.mode, this.previousMode] = [this.previousMode, ''];
    }
  }
}

相关依赖版本（package.json） #

{
  // 省略其他无关依赖
  "@fortawesome/angular-fontawesome": "^0.15.0",
  "@fortawesome/fontawesome-pro": "^6.5.2",
  "@fortawesome/fontawesome-svg-core": "^6.4.2"
}

排查结果与解决方案 #

• 原因：正常运行的机器使用的是angular-fontawesome 0.14版本，报错机器是0.15版本，[spin]属性在0.15版本中已被弃用，这不是Bug。
• 解决方式：
  • 静态启用旋转：直接使用无绑定的spin属性，无需方括号：<fa-icon [icon]="faSpinner" size="3x" spin></fa-icon>
  • 动态控制旋转：按照版本升级文档的要求，改用新的指令或绑定方式调整代码。

我已经复现该问题并提交了相关Issue，供遇到相同问题的开发者参考。

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