Feat: Upgrade to Angular 17 (#184)

angular.json

@@ -71,18 +71,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "FediseerGUI:build:production"
+              "buildTarget": "FediseerGUI:build:production"
             },
             "development": {
-              "browserTarget": "FediseerGUI:build:development"
+              "buildTarget": "FediseerGUI:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "FediseerGUI:build"
+            "buildTarget": "FediseerGUI:build"
           }
         },
         "test": {
@@ -133,7 +133,7 @@
           "defaultConfiguration": "production"
         },
         "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
           "configurations": {
             "development": {
               "browserTarget": "FediseerGUI:build:development",
@@ -147,7 +147,7 @@
           "defaultConfiguration": "development"
         },
         "prerender": {
-          "builder": "@nguniversal/builders:prerender",
+          "builder": "@angular-devkit/build-angular:prerender",
           "options": {
             "routes": [
               "/"

package.json

@@ -14,18 +14,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.0",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
-    "@angular/platform-server": "^16.2.0",
-    "@angular/router": "^16.2.0",
+    "@angular/animations": "^17.3.2",
+    "@angular/common": "^17.3.2",
+    "@angular/compiler": "^17.3.2",
+    "@angular/core": "^17.3.2",
+    "@angular/forms": "^17.3.2",
+    "@angular/platform-browser": "^17.3.2",
+    "@angular/platform-browser-dynamic": "^17.3.2",
+    "@angular/platform-server": "^17.3.2",
+    "@angular/router": "^17.3.2",
+    "@angular/ssr": "^17.3.3",
     "@ng-bootstrap/ng-bootstrap": "^15.1.1",
     "@ngneat/transloco": "5.0.9",
-    "@nguniversal/express-engine": "^16.2.0",
     "@popperjs/core": "^2.11.8",
     "@types/node": "^20.5.9",
     "express": "^4.15.2",
@@ -34,26 +34,26 @@
     "rxjs": "~7.8.0",
     "tom-select": "^2.2.2",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.1",
-    "@angular/cli": "~16.2.1",
-    "@angular/compiler-cli": "^16.2.0",
-    "@nguniversal/builders": "^16.2.0",
+    "@angular-devkit/build-angular": "^17.3.3",
+    "@angular/cli": "~17.3.3",
+    "@angular/compiler-cli": "^17.3.2",
     "@types/express": "^4.17.0",
     "@types/jasmine": "~4.3.0",
     "@types/node": "^16.11.7",
+    "browser-sync": "^3.0.0",
     "jasmine-core": "~4.6.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",
     "replace-in-file": "^7.0.1",
-    "typescript": "~5.1.3"
+    "typescript": "~5.4.3"
   },
   "resolutions": {
     "wrap-ansi": "^7.0.0"
   }
-}
+}

server.ts

@@ -1,22 +1,22 @@
+
 import 'zone.js/node';
 
 import { APP_BASE_HREF } from '@angular/common';
-import { ngExpressEngine } from '@nguniversal/express-engine';
+import { CommonEngine } from '@angular/ssr';
 import * as express from 'express';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
-import { AppServerModule } from './src/main.server';
+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/FediseerGUI/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule
-  }));
+  const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
@@ -28,9 +28,21 @@ export function app(): express.Express {
     maxAge: '1y'
   }));
 
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [
+          { provide: APP_BASE_HREF, useValue: baseUrl },],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
   });
 
   return server;
@@ -56,4 +68,4 @@ if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
-export * from './src/main.server';
+export default bootstrap;

src/app/app.component.ts

@@ -82,7 +82,7 @@ export class AppComponent implements OnInit {
     if (this.database.storedLanguage) {
       this.transloco.setActiveLang(this.database.storedLanguage);
       this.selectedLanguage = this.database.storedLanguage;
-    } else {
+    } else if (typeof navigator !== 'undefined') {
       for (const language of navigator.languages.map(language => language.split("-")[0])) {
         if (this.availableLanguages.includes(language)) {
           this.transloco.setActiveLang(language);
@@ -93,7 +93,7 @@ export class AppComponent implements OnInit {
     }
     this.selectedLanguage ??= this.transloco.config.defaultLang;
 
-    const darkModeDetected = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const darkModeDetected = typeof window === 'undefined' ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
     if (darkModeDetected) {
       this.document.body.classList.add('dark-mode');
     } else {

src/app/instances/pages/reset-instance-token/reset-instance-token.component.html

@@ -5,13 +5,13 @@
         Before resetting your api key, please provide the current one. If you have forgotten the old API key you need to
         ask another admin in your instance, or the Fediseer admin
         <ng-container *ngIf="software === 'lemmy'">
-          (<a target="_blank" href="https://{{instance}}/u/db0@lemmy.dbzer0.com">@db0@lemmy.dbzer0.com</a>)
+          (<a target="_blank" href="https://{{instance}}/u/db0@lemmy.dbzer0.com">&#64;db0&#64;lemmy.dbzer0.com</a>)
         </ng-container>
         <ng-container *ngIf="software === 'mastodon'">
-          (<a target="_blank" href="https://{{instance}}/@db0@lemmy.dbzer0.com">@db0@lemmy.dbzer0.com</a>)
+          (<a target="_blank" href="https://{{instance}}/@db0@lemmy.dbzer0.com">&#64;db0&#64;lemmy.dbzer0.com</a>)
         </ng-container>
         <ng-container *ngIf="software !== 'mastodon' && software !== 'lemmy'">
-          (<a target="_blank" href="https://lemmyverse.link/u/db0@lemmy.dbzer0.com">@db0@lemmy.dbzer0.com</a>)
+          (<a target="_blank" href="https://lemmyverse.link/u/db0@lemmy.dbzer0.com">&#64;db0&#64;lemmy.dbzer0.com</a>)
         </ng-container>
         to reset it for you.
       </p>

src/environments/environment.ts

@@ -1,6 +1,10 @@
 import {FilterSpecialValueAllInstances} from "../app/shared/constants";
 
 function getEnvironmentVariable<T>(variable: string, defaultValue: T): T {
+  if (typeof window === 'undefined') {
+    return defaultValue;
+  }
+
   if (typeof (<any>window)[variable] === 'undefined') {
     return defaultValue;
   }

src/main.server.ts

@@ -1,2 +1,6 @@
 
-export { AppServerModule } from './app/app.server.module';
+// export { AppServerModule } from './app/app.server.module';
+
+import {AppServerModule} from "./app/app.server.module";
+
+export default AppServerModule;