Upgrade to Angular 17

Fixes #416 #410
FortAwesome · Nov 8, 2023 · 547042a · 547042a
1 parent 0325c0c
commit 547042a
Show file tree

Hide file tree

Showing 24 changed files with 3,740 additions and 2,441 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -13,6 +13,7 @@ jobs:
         with:
           path: .yarn/cache
           key: ${{ hashFiles('yarn.lock') }}
+      - run: corepack enable
       - run: yarn
       - run: yarn add -D @fortawesome/fontawesome-svg-core@1.2.36 @fortawesome/free-regular-svg-icons@5.15.4 @fortawesome/free-solid-svg-icons@5.15.4
       - run: yarn format:enforce
@@ -22,8 +23,8 @@ jobs:
       - run: yarn build
       - run: yarn build:schematics
       - run: yarn test:demo
-      - run: yarn webdriver-manager update --versions.chrome=`google-chrome --version | awk '{print $3}'` --standalone false --gecko false
-      - run: yarn test:integration --configuration=ci
+      - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
+      - run: yarn test:integration
   check6:
     name: Font Awesome 6
     runs-on: ubuntu-latest
@@ -36,6 +37,7 @@ jobs:
         with:
           path: .yarn/cache
           key: ${{ hashFiles('yarn.lock') }}
+      - run: corepack enable
       - run: yarn
       - run: yarn format:enforce
       - run: yarn lint
@@ -44,5 +46,5 @@ jobs:
       - run: yarn build
       - run: yarn build:schematics
       - run: yarn test:demo
-      - run: yarn webdriver-manager update --versions.chrome=`google-chrome --version | awk '{print $3}'` --standalone false --gecko false
-      - run: yarn test:integration --configuration=ci
+      - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
+      - run: yarn test:integration
diff --git a/angular.json b/angular.json
@@ -26,7 +26,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js"
           }
@@ -57,7 +57,7 @@
             "outputPath": "dist/demo",
             "index": "projects/demo/src/index.html",
             "main": "projects/demo/src/main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": ["projects/demo/src/favicon.ico", "projects/demo/src/assets"],
             "styles": ["projects/demo/src/styles.scss"],
@@ -71,12 +71,6 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "projects/demo/src/environments/environment.ts",
-                  "with": "projects/demo/src/environments/environment.prod.ts"
-                }
-              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -105,25 +99,24 @@
           "options": {},
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/demo/src/test.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "projects/demo/tsconfig.spec.json",
             "karmaConfig": "projects/demo/karma.conf.js",
             "assets": ["projects/demo/src/favicon.ico", "projects/demo/src/assets"],
@@ -144,14 +137,11 @@
           },
           "configurations": {
             "production": {
-              "devServerTarget": "demo:serve:production"
+              "devServerTarget": "demo:serve:production",
+              "webdriverUpdate": false
             },
             "development": {
               "devServerTarget": "demo:serve:development"
-            },
-            "ci": {
-              "devServerTarget": "demo:serve:production",
-              "webdriverUpdate": false
             }
           },
           "defaultConfiguration": "production"

diff --git a/package.json b/package.json
@@ -25,51 +25,52 @@
   },
   "homepage": "https://github.com/FortAwesome/angular-fontawesome",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular-devkit/core": "^16.0.0",
-    "@angular-devkit/schematics": "^16.0.0",
-    "@angular-eslint/builder": "^16.0.1",
-    "@angular-eslint/eslint-plugin": "^16.0.1",
-    "@angular-eslint/eslint-plugin-template": "^16.0.1",
-    "@angular-eslint/schematics": "16.0.1",
-    "@angular-eslint/template-parser": "^16.0.1",
-    "@angular/cli": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/compiler-cli": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/language-service": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular-devkit/core": "^17.0.0",
+    "@angular-devkit/schematics": "^17.0.0",
+    "@angular-eslint/builder": "^17.0.0",
+    "@angular-eslint/eslint-plugin": "^17.0.0",
+    "@angular-eslint/eslint-plugin-template": "^17.0.0",
+    "@angular-eslint/schematics": "17.0.0",
+    "@angular-eslint/template-parser": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/language-service": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@types/jasmine": "~4.3.0",
-    "@types/node": "~18.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsdoc": "^39.6.2",
+    "@types/node": "~20.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "chromedriver": "~119.0.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "~2.2.0",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^16.0.0",
-    "prettier": "2.7.1",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "ng-packagr": "^17.0.0",
+    "prettier": "3.0.3",
     "protractor": "~7.0.0",
-    "rxjs": "^7.5.7",
+    "rxjs": "^7.8.1",
     "ts-node": "~10.9.1",
-    "typescript": "~5.0.4",
-    "zone.js": "~0.13.0"
+    "typescript": "~5.2.2",
+    "zone.js": "~0.14.2"
   },
   "dependencies": {
-    "tslib": "^2.4.1"
+    "tslib": "^2.6.2"
   },
   "keywords": [
     "angular",
@@ -80,7 +81,7 @@
     "svg"
   ],
   "peerDependencies": {
-    "@angular/core": "^16.0.0",
+    "@angular/core": "^17.0.0",
     "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0"
   },
   "schematics": "./schematics/collection.json",

diff --git a/projects/demo/e2e/protractor.conf.js b/projects/demo/e2e/protractor.conf.js
@@ -8,6 +8,7 @@ const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
  * @type { import("protractor").Config }
  */
 exports.config = {
+  chromeDriver: require(`chromedriver/lib/chromedriver`).path,
   allScriptsTimeout: 11000,
   specs: ['./src/**/*.e2e-spec.ts'],
   capabilities: {

diff --git a/projects/demo/src/assets/.gitkeep b/projects/demo/src/assets/.gitkeep
diff --git a/projects/demo/src/environments/environment.prod.ts b/projects/demo/src/environments/environment.prod.ts
diff --git a/projects/demo/src/environments/environment.ts b/projects/demo/src/environments/environment.ts
diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/projects/demo/src/main.ts b/projects/demo/src/main.ts
@@ -2,11 +2,6 @@ import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)

diff --git a/projects/demo/src/polyfills.ts b/projects/demo/src/polyfills.ts
diff --git a/projects/demo/src/test.ts b/projects/demo/src/test.ts
diff --git a/projects/demo/tsconfig.app.json b/projects/demo/tsconfig.app.json
@@ -2,8 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
 }
diff --git a/projects/demo/tsconfig.spec.json b/projects/demo/tsconfig.spec.json
@@ -2,8 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": ["jasmine"]
+    "types": ["node", "jasmine"]
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
diff --git a/projects/schematics/src/ng-add/index.spec.ts b/projects/schematics/src/ng-add/index.spec.ts
@@ -37,8 +37,8 @@ describe('ng-add', () => {
     expect(dependencies['@fortawesome/angular-fontawesome']).toBe(angularFontawesomeVersion);
   });
 
-  it('adds FontAwesomeModule import to the AppModule', async () => {
-    const { runner, appTree } = await setup();
+  it('adds FontAwesomeModule import to the AppModule when standalone=false', async () => {
+    const { runner, appTree } = await setup(false);
 
     const tree = await runner.runSchematic<Schema>('ng-add', { project: 'test-app' }, appTree);
 
@@ -47,6 +47,14 @@ describe('ng-add', () => {
     expect(contents).toContain('import { FontAwesomeModule }');
   });
 
+  it('does not attempt to add FontAwesomeModule import to the AppModule when standalone=true', async () => {
+    const { runner, appTree } = await setup();
+
+    const tree = await runner.runSchematic<Schema>('ng-add', { project: 'test-app' }, appTree);
+
+    expect(tree.files).not.toContain('/src/app/app.module.ts');
+  });
+
   it('installs @fortawesome/free-solid-svg-icons package by default', async () => {
     const { runner, appTree } = await setup();
 
@@ -98,7 +106,7 @@ describe('ng-add', () => {
   });
 });
 
-const setup = async () => {
+const setup = async (standalone?: boolean) => {
   const runner = new SchematicTestRunner('schematics', collectionPath);
 
   const appTree = await runner.runExternalSchematic(
@@ -108,6 +116,7 @@ const setup = async () => {
       name: 'test-app',
       version: '9.0.0-rc.6',
       directory: '.',
+      standalone,
     },
     Tree.empty(),
   );