Using FontAwesome 6 with Angular 18, "Can't bind to 'spin' since it isn't a known property of 'fa-icon'"

FINAL EDIT: https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/upgrading/0.14.0-0.15.0.md

Not a bug, it was deprecated.

EDIT - It appears (to me) to be a bug. The version of FA on the working machine is 0.14 and the version that isn't working is 0.15. I was able to create a sample app showing the error (https://stackblitz.com/edit/angular-ivy-2flzzn?file=src%2Fapp%2Fapp.component.html) and have submitted it to FA (https://github.com/FortAwesome/angular-fontawesome/issues/447). Leaving this here just in case anyone else runs into the same issue and is tearing their hair out like I am.

I'm not sure what's going on. I work on my code from two machines. The [spin] property has worked fine for a while. Recently, I upgraded from Angular 17 to 18, saved my changes to git, and synched on the other machine. On the first machine, this still works. On the second machine, I'm getting an error. Here is the error:

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)

This is the HTML that is causing the error:

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

And here is the component code: 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, ''];
    }
  }
}

And package.json

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:app": "node dist/app/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.1",
    "@angular/cdk": "^18.0.1",
    "@angular/common": "^18.0.1",
    "@angular/compiler": "^18.0.1",
    "@angular/core": "^18.0.1",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "^18.0.1",
    "@angular/material": "^18.0.1",
    "@angular/platform-browser": "^18.0.1",
    "@angular/platform-browser-dynamic": "^18.0.1",
    "@angular/platform-server": "^18.0.1",
    "@angular/router": "^18.0.1",
    "@angular/ssr": "^18.0.2",
    "@fortawesome/angular-fontawesome": "^0.15.0",
    "@fortawesome/fontawesome-pro": "^6.5.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/pro-duotone-svg-icons": "^6.4.2",
    "@fortawesome/pro-light-svg-icons": "^6.4.2",
    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
    "@fortawesome/pro-thin-svg-icons": "^6.4.2",
    "@fortawesome/sharp-solid-svg-icons": "^6.4.2",
    "canvas": "^2.11.2",
    "express": "^4.18.2",
    "motion": "^10.17.0",
    "ngx-color-picker": "^16.0.0",
    "openai": "^4.31.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.2",
    "@angular/cli": "^18.0.2",
    "@angular/compiler-cli": "^18.0.1",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.5"
  }
}

Any ideas on why this is occurring or what I can try? I've deleted the entire node_modules directory and reran "npm i" to make sure all the packages are up to date.

Solution

I think the API has changed.

Now, we can use [animation]='spin' instead of [spin]="true"

Supported values for animation props.model.ts

export type AnimationProp =
  | 'beat'
  | 'fade'
  | 'beat-fade'
  | 'bounce'
  | 'flip'
  | 'shake'
  | 'spin'
  | 'spin-reverse'
  | 'spin-pulse'
  | 'spin-pulse-reverse';

Fa Icon component source code for reference

Before:

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

After:

<div>
  <fa-icon [icon]="faCircleUp" size="3x" [animation]="'spin'"></fa-icon>
</div>

Using FontAwesome 6 with Angular 18, "Can't bind to 'spin' since it isn't a known property of 'fa-icon'"

Before:

After:

Stackblitz Demo