Add support for Angular 22

.github/workflows/check.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - uses: actions/cache@v4
         with:
           path: .yarn/cache
@@ -24,7 +24,6 @@ jobs:
       - run: yarn build:schematics
       - run: yarn build:demo
       - run: yarn test:demo
-      - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
       - run: yarn test:integration
       - run: yarn test:integration:ssr
   check6:
@@ -34,7 +33,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - uses: actions/cache@v4
         with:
           path: .yarn/cache
@@ -50,7 +49,6 @@ jobs:
       - run: yarn build:schematics
       - run: yarn build:demo
       - run: yarn test:demo
-      - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
       - run: yarn test:integration
       - run: yarn test:integration:ssr
   check7:
@@ -60,7 +58,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - uses: actions/cache@v4
         with:
           path: .yarn/cache
@@ -75,6 +73,5 @@ jobs:
       - run: yarn build:schematics
       - run: yarn build:demo
       - run: yarn test:demo
-      - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
       - run: yarn test:integration
       - run: yarn test:integration:ssr

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ---
+
+## [5.0.0](https://github.com/FortAwesome/angular-fontawesome/releases/tag/5.0.0) (TBD)
+
+### Added
+
+* Support for Angular 22.
+
+### Removed
+
+* Angular 21.x is no longer supported. If you are using this version, please, stick with version 4.0.0.
+
 ## [4.0.0](https://github.com/FortAwesome/angular-fontawesome/releases/tag/3.1.0) (2025-11-24)
 
 ### Added

DEVELOPER.md

@@ -42,7 +42,7 @@ Command     | Purpose
 ## Releasing
 
 1. Bump version in `package.json`
-1. Update versions in `projects/schematics/src/ng-add/versions.ts` to align with the published release.
+1. Update versions in `projects/schematics/src/ng-add/versions.cts` to align with the published release.
 1. Add contributors to `README.md`
 1. Update Compatibility table in `README.md` and `docs/guide/compatibility.md`
 1. Update the `CHANGELOG.md`

README.md

@@ -42,9 +42,9 @@ $ npm install @fortawesome/angular-fontawesome@<version>
 
 | @fortawesome/angular-fontawesome | Angular | Font Awesome      | 
 |----------------------------------|---------|-------------------|
+| 5.x                              | 22.x    | 5.x && 6.x && 7.x |
 | 4.x                              | 21.x    | 5.x && 6.x && 7.x |
 | 3.x                              | 20.x    | 5.x && 6.x && 7.x |
-| 2.x                              | 20.x    | 5.x && 6.x        |
 
 See [the compatibility page](./docs/guide/compatibility.md) for older versions.
 

angular.json

@@ -135,18 +135,17 @@
           }
         },
         "e2e": {
-          "builder": "@angular-devkit/build-angular:private-protractor",
+          "builder": "@puppeteer/ng-schematics:puppeteer",
           "options": {
-            "protractorConfig": "projects/demo/e2e/protractor.conf.js"
+            "devServerTarget": "demo:serve",
+            "testRunner": "jasmine"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "demo:serve:production",
-              "webdriverUpdate": false
+              "devServerTarget": "demo:serve:production"
             },
             "production-ssr": {
-              "devServerTarget": "demo:serve:production-ssr",
-              "webdriverUpdate": false
+              "devServerTarget": "demo:serve:production-ssr"
             }
           },
           "defaultConfiguration": "production"

docs/guide/compatibility.md

@@ -20,3 +20,5 @@
 | 2.x                              | 20.x       | 5.x && 6.x        | supported     |
 | 3.x                              | 20.x       | 5.x && 6.x && 7.x | supported     |
 | 4.x                              | 21.x       | 5.x && 6.x && 7.x | supported     |
+| 5.x                              | 22.x       | 5.x && 6.x && 7.x | supported     |
+

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fortawesome/angular-fontawesome",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Angular Fontawesome, an Angular library",
   "scripts": {
     "ng": "ng",
     "test": "ng test angular-fontawesome --watch=false --browsers=ChromeCI",
-    "test:schematics": "ts-node --project projects/schematics/tsconfig.json node_modules/.bin/jasmine projects/schematics/src/**/*.spec.ts",
+    "test:schematics": "tsx node_modules/.bin/jasmine projects/schematics/src/**/*.spec.cts",
     "test:demo": "ng test demo --watch=false --browsers=ChromeCI",
     "test:integration": "ng e2e demo",
     "test:integration:ssr": "ng e2e demo --configuration production-ssr",
@@ -15,7 +15,7 @@
     "build": "ng build angular-fontawesome",
     "build:demo": "ng build demo",
     "build:watch": "ng build angular-fontawesome -c development --watch",
-    "build:schematics": "tsc -p projects/schematics/tsconfig.json && ts-node -O '{\"module\":\"commonjs\"}' tasks/build-schematics.ts",
+    "build:schematics": "tsc -p projects/schematics/tsconfig.json && cp projects/schematics/src/collection.json dist/angular-fontawesome/schematics/collection.json && cp projects/schematics/src/ng-add/schema.json dist/angular-fontawesome/schematics/ng-add/schema.json",
     "format": "prettier --write --ignore-path .gitignore '**/*.{js,ts,json,html}'",
     "format:enforce": "prettier --check --ignore-path .gitignore '**/*.{js,ts,json,html}'"
   },
@@ -29,24 +29,24 @@
   },
   "homepage": "https://github.com/FortAwesome/angular-fontawesome",
   "devDependencies": {
-    "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A21.0.0#~/.yarn/patches/@angular-devkit-build-angular-npm-19.0.0-131974ef98.patch",
-    "@angular-devkit/core": "^21.0.0",
-    "@angular-devkit/schematics": "^21.0.0",
-    "@angular/animations": "^21.0.0",
-    "@angular/build": "^21.0.0",
-    "@angular/cli": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/compiler-cli": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/language-service": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/platform-server": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@angular/ssr": "^21.0.0",
+    "@angular-devkit/core": "^22.0.0",
+    "@angular-devkit/schematics": "^22.0.0",
+    "@angular/animations": "^22.0.0",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/language-service": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/platform-server": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@angular/ssr": "^22.0.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@puppeteer/ng-schematics": "^0.8.0",
     "@types/express": "^4.17.25",
     "@types/jasmine": "~4.3.6",
     "@types/node": "~22.9.4",
@@ -61,19 +61,20 @@
     "eslint-plugin-jsdoc": "^61.4.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "express": "^4.21.2",
+    "jasmine": "6.2.0",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^21.0.0",
+    "ng-packagr": "^22.0.0",
     "prettier": "3.6.2",
-    "protractor": "~7.0.0",
+    "puppeteer": "25.1.0",
     "rxjs": "^7.8.2",
-    "ts-node": "~10.9.2",
-    "typescript": "^5.9.3",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.48.0",
     "zone.js": "~0.15.1"
   },
@@ -90,7 +91,7 @@
     "svg"
   ],
   "peerDependencies": {
-    "@angular/core": "^21.0.0"
+    "@angular/core": "^22.0.0"
   },
   "schematics": "./schematics/collection.json",
   "packageManager": "yarn@4.9.2"

projects/demo/e2e/.gitignore

@@ -0,0 +1,2 @@
+# Compiled e2e tests output
+build/

projects/demo/e2e/jasmine.json

@@ -0,0 +1,10 @@
+{
+  "spec_dir": "e2e",
+  "spec_files": ["**/*[eE]2[eE].js"],
+  "helpers": ["helpers/**/*.?(m)js"],
+  "env": {
+    "failSpecWithNoExpectations": true,
+    "stopSpecOnExpectationFailure": false,
+    "random": true
+  }
+}

projects/demo/e2e/tests/app.e2e.ts

@@ -0,0 +1,42 @@
+import { getBrowserState, setupBrowserHooks } from './utils';
+
+describe('App test', function () {
+  setupBrowserHooks();
+
+  it('should render all icons', async () => {
+    const { page } = getBrowserState();
+
+    const svgs = await page.$$('svg');
+
+    expect(svgs.length).toBe(47);
+  });
+
+  it('should only add styles once', async () => {
+    const { page } = getBrowserState();
+
+    const stylesContent = await page.$$eval('style', (styles) => styles.map((s) => s.innerHTML));
+    const fontAwesomeStyles = stylesContent.filter((style) => style.includes('.svg-inline--fa'));
+
+    expect(fontAwesomeStyles.length).toBe(1);
+  });
+
+  it('should include styles in the server-side-rendered page', async () => {
+    const { page, baseUrl } = getBrowserState();
+
+    const context = await page.$eval('app-root', (el) => el.getAttribute('ng-server-context'));
+    if (context !== 'ssg') {
+      pending('Skipping test as the page is not server-side rendered.');
+      return;
+    }
+
+    const render1 = await fetch(baseUrl);
+    const text1 = await render1.text();
+    expect(text1).toContain('.svg-inline--fa');
+
+    // Repeated second time to make sure that second render also includes the styles.
+    // To achieve it we use WeakSet instead of a simple global variable.
+    const render2 = await fetch(baseUrl);
+    const text2 = await render2.text();
+    expect(text2).toContain('.svg-inline--fa');
+  });
+});