Update to Angular 18

angular.json

@@ -53,45 +53,48 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/demo/browser",
+            "outputPath": {
+              "base": "dist/demo"
+            },
             "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/main.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"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "projects/demo/src/main.ts",
+            "server": "projects/demo/src/main.server.ts"
           },
           "configurations": {
             "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true
+            },
+            "development": {},
+            "production-ssr": {
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ]
+              "ssr": {
+                "entry": "projects/demo/server.ts"
+              }
             },
-            "development": {}
+            "development-ssr": {
+              "ssr": {
+                "entry": "projects/demo/server.ts"
+              }
+            }
           },
           "defaultConfiguration": "production"
         },
@@ -104,16 +107,16 @@
             },
             "development": {
               "buildTarget": "demo:build:development"
+            },
+            "production-ssr": {
+              "buildTarget": "demo:build:production-ssr"
+            },
+            "development-ssr": {
+              "buildTarget": "demo:build:development-ssr"
             }
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "demo:build"
-          }
-        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -141,68 +144,12 @@
               "devServerTarget": "demo:serve:production",
               "webdriverUpdate": false
             },
-            "ssr": {
-              "devServerTarget": "demo:serve-ssr:production",
+            "production-ssr": {
+              "devServerTarget": "demo:serve:production-ssr",
               "webdriverUpdate": false
             }
           },
           "defaultConfiguration": "production"
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/demo/server",
-            "main": "projects/demo/server.ts",
-            "tsConfig": "projects/demo/tsconfig.server.json",
-            "buildOptimizer": false,
-            "optimization": false,
-            "sourceMap": true,
-            "extractLicenses": false,
-            "vendorChunk": true
-          },
-          "configurations": {
-            "production": {
-              "buildOptimizer": true,
-              "outputHashing": "media",
-              "optimization": true,
-              "sourceMap": false,
-              "extractLicenses": true,
-              "vendorChunk": false
-            },
-            "development": {}
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve-ssr": {
-          "builder": "@angular-devkit/build-angular:ssr-dev-server",
-          "configurations": {
-            "development": {
-              "browserTarget": "demo:build:development",
-              "serverTarget": "demo:server:development"
-            },
-            "production": {
-              "browserTarget": "demo:build:production",
-              "serverTarget": "demo:server:production"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
-          "options": {
-            "routes": ["/"]
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "demo:build:production",
-              "serverTarget": "demo:server:production"
-            },
-            "development": {
-              "browserTarget": "demo:build:development",
-              "serverTarget": "demo:server:development"
-            }
-          },
-          "defaultConfiguration": "production"
         }
       }
     }

package.json

@@ -7,10 +7,10 @@
     "test:schematics": "ts-node --project projects/schematics/tsconfig.json node_modules/.bin/jasmine projects/schematics/src/**/*.spec.ts",
     "test:demo": "ng test demo --watch=false --browsers=ChromeCI",
     "test:integration": "ng e2e demo",
-    "test:integration:ssr": "ng e2e demo --configuration ssr",
+    "test:integration:ssr": "ng e2e demo --configuration production-ssr",
     "lint": "ng lint",
     "start": "ng serve demo",
-    "start:ssr": "ng run demo:serve-ssr",
+    "start:ssr": "ng serve demo --configuration development-ssr",
     "build": "ng build angular-fontawesome",
     "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",
@@ -27,55 +27,55 @@
   },
   "homepage": "https://github.com/FortAwesome/angular-fontawesome",
   "devDependencies": {
-    "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A17.3.7#~/.yarn/patches/@angular-devkit-build-angular-npm-17.3.7-60e65bd832.patch",
-    "@angular-devkit/core": "^17.3.7",
-    "@angular-devkit/schematics": "^17.3.7",
+    "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A18.0.1#~/.yarn/patches/@angular-devkit-build-angular-npm-18.0.1-51eee52196.patch",
+    "@angular-devkit/core": "^18.0.1",
+    "@angular-devkit/schematics": "^18.0.1",
     "@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/animations": "^17.3.8",
-    "@angular/cli": "^17.3.7",
-    "@angular/common": "^17.3.8",
-    "@angular/compiler": "^17.3.8",
-    "@angular/compiler-cli": "^17.3.8",
-    "@angular/core": "^17.3.8",
-    "@angular/language-service": "^17.3.8",
-    "@angular/platform-browser": "^17.3.8",
-    "@angular/platform-browser-dynamic": "^17.3.8",
-    "@angular/platform-server": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "@angular/ssr": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cli": "^18.0.1",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/platform-server": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@angular/ssr": "^18.0.1",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@types/express": "^4.17.17",
-    "@types/jasmine": "~4.3.0",
-    "@types/node": "~20.9.0",
+    "@types/express": "^4.17.21",
+    "@types/jasmine": "~4.3.6",
+    "@types/node": "~20.12.12",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
-    "browser-sync": "^3.0.0",
+    "browser-sync": "^3.0.2",
     "chromedriver": "~123.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",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
+    "karma": "~6.4.3",
     "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": "^17.0.0",
-    "prettier": "3.0.3",
+    "ng-packagr": "^18.0.0",
+    "prettier": "3.2.5",
     "protractor": "~7.0.0",
     "rxjs": "^7.8.1",
-    "ts-node": "~10.9.1",
-    "typescript": "~5.2.2",
-    "zone.js": "~0.14.2"
+    "ts-node": "~10.9.2",
+    "typescript": "~5.4.5",
+    "zone.js": "~0.14.6"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -90,7 +90,7 @@
     "svg"
   ],
   "peerDependencies": {
-    "@angular/core": "^17.0.0"
+    "@angular/core": "^18.0.0"
   },
   "schematics": "./schematics/collection.json",
   "packageManager": "yarn@4.0.1"

projects/demo/.eslintrc.json

@@ -7,7 +7,6 @@
       "parserOptions": {
         "project": [
           "projects/demo/tsconfig.app.json",
-          "projects/demo/tsconfig.server.json",
           "projects/demo/tsconfig.spec.json",
           "projects/demo/e2e/tsconfig.json"
         ],

projects/demo/e2e/src/app.e2e-spec.ts

@@ -24,6 +24,7 @@ describe('Angular FontAwesome demo', () => {
     const context = await appPage.appRoot.getAttribute('ng-server-context');
     if (context !== 'ssr') {
       // Skip the test if the page is not server-side rendered.
+      console.warn('Skipping test as the page is not server-side rendered.');
       return;
     }
 

projects/demo/server.ts

@@ -1,45 +1,43 @@
-import 'zone.js/node';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr';
-import * as express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
 import bootstrap from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/demo/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', distFolder);
+  server.set('views', browserDistFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   server.get(
-    '*.*',
-    express.static(distFolder, {
+    '**',
+    express.static(browserDistFolder, {
       maxAge: '1y',
+      index: 'index.html',
     }),
   );
 
   // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
+  server.get('**', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
     commonEngine
       .render({
         bootstrap,
         documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: distFolder,
+        publicPath: browserDistFolder,
         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
       })
       .then((html) => res.send(html))
@@ -59,14 +57,4 @@ function run(): void {
   });
 }
 
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = (mainModule && mainModule.filename) || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export default bootstrap;
+run();

projects/demo/tsconfig.app.json

@@ -4,6 +4,6 @@
     "outDir": "../../out-tsc/app",
     "types": ["node"]
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"]
 }

testing/ng-package.json

@@ -1,7 +1,5 @@
 {
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/angular-fontawesome/testing",
-  "deleteDestPath": true,
+  "$schema": "../node_modules/ng-packagr/ng-entrypoint.schema.json",
   "lib": {
     "entryFile": "src/public_api.ts"
   }

tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "strictPropertyInitialization": false,
     "strictNullChecks": false,
@@ -13,7 +14,6 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
     "importHelpers": true,