Migrated to angular + vite

Author: MarcelCoding

.github/dependabot.yaml

@@ -0,0 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "daily"

.nvmrc

@@ -1 +1 @@
-18
+20

README.md

@@ -1,6 +1,6 @@
 # Presence
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.1.
 
 ## Development server
 

angular.json

@@ -27,11 +27,11 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/presence/browser",
+            "outputPath": "dist/presence",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -55,7 +55,12 @@
                 "node_modules/@feel/style/global",
                 "src/scss/global"
               ]
-            }
+            },
+            "server": "src/main.server.ts",
+            "ssr": {
+              "entry": "src/main.ssr.ts"
+            },
+            "prerender": false
           },
           "configurations": {
             "production": {
@@ -74,12 +79,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -131,67 +133,6 @@
               ]
             }
           }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/presence/server",
-            "main": "src/main.server.ts",
-            "tsConfig": "tsconfig.server.json",
-            "inlineStyleLanguage": "scss",
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "node_modules/@feel/style/global",
-                "src/scss/global"
-              ]
-            }
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "sourceMap": true,
-              "extractLicenses": false,
-              "vendorChunk": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve-ssr": {
-          "builder": "@angular-devkit/build-angular:ssr-dev-server",
-          "configurations": {
-            "development": {
-              "browserTarget": "presence:build:development",
-              "serverTarget": "presence:server:development"
-            },
-            "production": {
-              "browserTarget": "presence:build:production",
-              "serverTarget": "presence:server:production"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
-          "options": {
-            "routes": [
-              "/"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "presence:build:production",
-              "serverTarget": "presence:server:production"
-            },
-            "development": {
-              "browserTarget": "presence:build:development",
-              "serverTarget": "presence:server:development"
-            }
-          },
-          "defaultConfiguration": "production"
         }
       }
     }

flake.lock

@@ -27,15 +27,6 @@
             presence = package;
             default = package;
           };
-
-          devShells.default = pkgs.mkShell {
-            nativeBuildInputs = (with packages.default; nativeBuildInputs ++ buildInputs) ++ [
-              # python for running test scripts
-              (pkgs.python3.withPackages (p: with p; [
-                requests
-              ]))
-            ];
-          };
         }
       ) // {
       overlays.default = final: prev: {

flake.nix

@@ -1,34 +1,30 @@
 {
   "name": "presence",
   "version": "0.0.0",
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.10.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --output-path ./dist",
-    "build:ci": "ng build --output-path ./dist/browser --localize && ng run presence:server --output-path ./dist/server --localize && rollup -c rollup.config.mjs",
+    "build:ci": "ng build --output-path ./dist --localize && rollup -c rollup.config.mjs",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
-    "dev:ssr": "ng run presence:serve-ssr",
-    "serve:ssr": "node dist/presence/server/main.js",
-    "build:ssr": "ng build && ng run presence:server",
-    "prerender": "ng run presence:prerender",
+    "serve:ssr": "node dist/server/server.mjs",
     "extract-i18n": "ng extract-i18n --out-file src/locales/en_devel.xlf --format xlif"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.1",
-    "@angular/cdk": "17.2.0",
-    "@angular/common": "^17.2.1",
-    "@angular/compiler": "^17.2.1",
-    "@angular/core": "^17.2.1",
-    "@angular/forms": "^17.2.1",
-    "@angular/platform-browser": "^17.2.1",
-    "@angular/platform-browser-dynamic": "^17.2.1",
-    "@angular/platform-server": "^17.2.1",
-    "@angular/router": "^17.2.1",
-    "@angular/ssr": "^17.2.0",
+    "@angular/animations": "^17.2.2",
+    "@angular/common": "^17.2.2",
+    "@angular/compiler": "^17.2.2",
+    "@angular/core": "^17.2.2",
+    "@angular/forms": "^17.2.2",
+    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/platform-server": "^17.2.2",
+    "@angular/router": "^17.2.2",
+    "@angular/ssr": "^17.2.1",
     "@feel/form": "^0.0.14",
     "@feel/notification": "^0.0.14",
     "@feel/style": "^0.0.14",
@@ -39,24 +35,24 @@
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular/cli": "~17.2.0",
-    "@angular/compiler-cli": "^17.2.1",
-    "@angular/localize": "17.2.1",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular/cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.2.2",
+    "@angular/localize": "17.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/express": "^4.17.21",
-    "@types/node": "^20.11.19",
-    "browser-sync": "^3.0.2",
+    "@types/jasmine": "~5.1.4",
+    "@types/node": "^18.19.18",
     "jasmine-core": "~5.1.2",
-    "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",
     "rollup": "^4.12.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.3.3"
   }
-}
+}

package.json

@@ -4,9 +4,9 @@ import {resolve} from 'path';
 async function app(appDir: string, lang: string): Promise<express.Express> {
   const serverFolder = resolve(`${appDir}/server/${lang}`);
 
-  const {default: module} = await import(`${serverFolder}/main.js`);
+  const {app}: { app: (appDir: string, lang: string) => express.Express } = await import(`${serverFolder}/server.mjs`);
 
-  return module.app(appDir, lang);
+  return app(appDir, lang);
 }
 
 async function main() {

pnpm-lock.yaml

@@ -1,17 +1,31 @@
 import {ChangeDetectionStrategy, Component, HostListener, Inject, LOCALE_ID} from '@angular/core';
 import {routingAnimation} from "./animation/routing.animation";
-import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
-import {DOCUMENT, Location, PlatformLocation} from "@angular/common";
+import {ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
+import {AsyncPipe, DOCUMENT, Location, NgIf, PlatformLocation} from "@angular/common";
 import {BehaviorSubject, delay, filter, map, take} from "rxjs";
 import {Meta, Title} from "@angular/platform-browser";
 import {Language} from "./api/api.domain";
+import {IconLogoComponent} from "./icons/icon-logo/icon-logo.component";
+import {IconMenuComponent} from "./icons/icon-menu/icon-menu.component";
+import {NotificationListComponent} from "@feel/notification";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [routingAnimation],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    RouterLink,
+    IconLogoComponent,
+    RouterLinkActive,
+    IconMenuComponent,
+    RouterOutlet,
+    NotificationListComponent,
+    NgIf
+  ]
 })
 export class AppComponent {
 

server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

shell.nix

@@ -0,0 +1,16 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration } from '@angular/platform-browser';
+import {provideHttpClient, withFetch} from "@angular/common/http";
+import {provideAnimationsAsync} from "@angular/platform-browser/animations/async";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideClientHydration(),
+    provideHttpClient(withFetch()),
+    provideAnimationsAsync()
+  ]
+};

src/app/app.component.ts

@@ -1,7 +1,6 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
-const routes: Routes = [
+export const routes: Routes = [
   {path: '', loadComponent: () => import('./pages/home/home.component').then(c => c.HomeComponent)},
   {
     path: 'news',
@@ -44,12 +43,3 @@ const routes: Routes = [
     loadComponent: () => import('./pages/not-found/not-found.component').then(c => c.NotFoundComponent)
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {
-    initialNavigation: 'enabledBlocking'
-  })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {
-}

src/app/app.config.server.ts

@@ -1,43 +1,7 @@
-import 'zone.js/node';
-import {AppServerModule} from './app/app.server.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
 
-import {APP_BASE_HREF} from '@angular/common';
-import {CommonEngine} from '@angular/ssr';
-import * as express from 'express';
-import {join, resolve} from 'node:path';
-import {LOCALE_ID} from "@angular/core";
+const bootstrap = () => bootstrapApplication(AppComponent, config);
 
-export function app(appDir: string, lang: string): express.Express {
-  const app = express();
-
-  const browserFolder = resolve(`${appDir}/browser/${lang}`);
-  const indexHtml =    join(browserFolder, 'index.html');
-
-  const commonEngine = new CommonEngine();
-
-  app.set('view engine', 'html');
-  app.set('views', browserFolder);
-
-  app.get('*.*', express.static(browserFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Angular engine
-  app.get('*', (req, res, next) =>
-    commonEngine
-      .render({
-        bootstrap: AppServerModule,
-        documentFilePath: indexHtml,
-        url: `${req.protocol}://${req.headers.host}${req.originalUrl}`,
-        publicPath: browserFolder,
-        providers: [
-          {provide: APP_BASE_HREF, useValue: req.baseUrl},
-          {provide: LOCALE_ID, useValue: lang}
-        ],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err))
-  );
-
-  return app;
-}
+export default bootstrap;

src/app/app.config.ts

@@ -0,0 +1,47 @@
+import {APP_BASE_HREF} from '@angular/common';
+import {CommonEngine} from '@angular/ssr';
+import express from 'express';
+import {fileURLToPath} from 'node:url';
+import {dirname, join, resolve} from 'node:path';
+import bootstrap from './main.server';
+import {LOCALE_ID} from "@angular/core";
+
+export function app(appDir: string, lang: string): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(appDir, 'browser', lang);
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(browserDistFolder, {
+    maxAge: '1y'
+  }));
+
+  // 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: browserDistFolder,
+        providers: [
+          {provide: APP_BASE_HREF, useValue: baseUrl},
+          {provide: LOCALE_ID, useValue: lang},
+        ],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}

src/app/app.module.ts

@@ -1,7 +1,8 @@
 /// <reference types="@angular/localize" />
 
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {AppModule} from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/app/app-routing.module.ts src/app/app.routes.ts

@@ -4,11 +4,15 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [
+      "node",
       "@angular/localize"
     ]
   },
   "files": [
-    "src/main.ts"
+    "src/main.ts",
+    "src/main.server.ts",
+    "src/main.ssr.ts",
+    "server.ts"
   ],
   "include": [
     "src/**/*.d.ts"

src/app/app.server.module.ts

@@ -2,17 +2,17 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,