Init nx

.github/workflows/nodejs.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
     - uses: actions/checkout@v1

.gitignore

@@ -13,6 +13,7 @@ log.txt
 npm-debug.log*
 *.db
 
+.nx/
 .env
 .idea/
 .ionic/

README.md

@@ -10,7 +10,7 @@ Simple and customizable Dashboard, made with Ionic, angular, Node.JS and GraphQL
 
 ### Prerequisites
 
-- Node >= 12.0
+- Node >= 22.0
 
 ### Used external Libraries
 

angular.json

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
   "version": 1,
-  "defaultProject": "app",
   "newProjectRoot": "projects",
   "projects": {
     "app": {
@@ -81,11 +80,11 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             },
             "ci": {
               "progress": false
@@ -95,7 +94,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
@@ -181,7 +180,10 @@
     }
   },
   "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
+    "analytics": false,
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ]
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

browserlist

@@ -5,8 +5,9 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+Chrome >=89
+ChromeAndroid >=89
+Firefox >=75
+Edge >=89
+Safari >=15
+iOS >=15

package.json

@@ -14,19 +14,21 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/common": "^19.2.16",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
-    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/router": "^14.0.0",
+    "@angular/common": "^17.3.12",
+    "@angular/core": "^17.3.12",
+    "@angular/forms": "^17.3.12",
+    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/router": "^17.3.12",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
-    "@ionic/angular": "^6.1.9",
-    "@ionic/storage-angular": "^3.0.6",
+    "@ionic/angular": "^8.7.15",
+    "@ionic/angular-server": "^8.7.15",
+    "@ionic/storage-angular": "^4.0.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
+    "@nx/angular": "17.0.6",
     "body-parser": "^1.15.2",
     "btoa": "^1.1.2",
     "compression": "^1.7.4",
@@ -41,33 +43,34 @@
     "graphql": "^14.0.0",
     "graphql-tag": "^2.0.0",
     "helmet": "^3.21.1",
-    "highcharts": "^9.0.0",
-    "highcharts-angular": "^2.8.0",
-    "ionicons": "^6.0.0",
+    "highcharts": "^12.4.0",
+    "highcharts-angular": "4.0.1",
+    "ionicons": "^8.0.13",
     "nedb": "^1.8.0",
     "node-fetch": "2.6.7",
     "node-oauth2-server": "^2.4.0",
     "nodemailer": "^7.0.11",
     "packery": "^2.1.2",
     "password-hash": "^1.2.2",
-    "rxjs": "~6.6.0",
+    "rxjs": "7.5.0",
     "tslib": "^2.2.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular-devkit/build-angular": "^17.3.17",
     "@angular-eslint/builder": "~13.0.1",
     "@angular-eslint/eslint-plugin": "~13.0.1",
     "@angular-eslint/eslint-plugin-template": "~13.0.1",
     "@angular-eslint/template-parser": "~13.0.1",
-    "@angular/cli": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
-    "@angular/language-service": "^14.0.0",
-    "@ionic/angular-toolkit": "^6.0.0",
+    "@angular/cli": "17.3.17",
+    "@angular/compiler": "^17.3.12",
+    "@angular/compiler-cli": "^17.3.12",
+    "@angular/language-service": "^17.3.12",
+    "@ionic/angular-toolkit": "11",
+    "@nx/workspace": "17.0.6",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
+    "@types/node": "18.16.9",
     "@typescript-eslint/eslint-plugin": "5.3.0",
     "@typescript-eslint/parser": "5.3.0",
     "eslint": "^7.6.0",
@@ -82,14 +85,11 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "mocha": "^7.1.1",
+    "nx": "17.0.6",
     "protractor": "~7.0.0",
     "supertest": "^3.3.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.7.3"
+    "typescript": "~5.4.5"
   },
-  "engines": {
-    "node": "16.x"
-  },
-  "type": "commonjs",
   "description": "dasho project"
 }

src/app/app.module.ts

@@ -26,7 +26,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   declarations: [
     AppComponent
   ],
-  entryComponents: [],
   imports: [
     BrowserModule,
     HttpClientModule,

src/app/core/core.module.ts

@@ -15,7 +15,7 @@ import { Events } from './services/events.service';
     CommonModule,
     FormsModule,
     IonicModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
   ],
   exports: [
     MenuComponent

src/app/modules/main/components/login/login.html

@@ -5,7 +5,7 @@
       <form #form="ngForm" (ngSubmit)="loginForm(form)" novalidate>
         <ion-list>
           <ion-item class="login-select-language">
-            <ion-label translate>general.language</ion-label>
+            <ion-label>{{ 'general.language' | translate }}</ion-label>
             <ion-select name="language" [(ngModel)]="languageService.currentLanguage" (ionChange)="changeLanguage()" okText="{{'general.ok' | translate}}" cancelText="{{'general.cancel' | translate}}">
               <ion-select-option value="de">Deutsch</ion-select-option>
               <ion-select-option value="en">English</ion-select-option>
@@ -14,14 +14,14 @@
 
           <ion-item class="login-box-input">
             <ion-label stacked [color]="formErrors.username ? 'danger': 'primary'">
-              <span translate *ngIf="!formErrors.username">general.emailAddress</span>
-              <span translate *ngIf="formErrors.username">login.mailerror</span>
+              <span *ngIf="!formErrors.username">{{ 'general.emailAddress' | translate }}</span>
+              <span *ngIf="formErrors.username">{{ 'login.mailerror' | translate }}</span>
             </ion-label>
             <ion-input id="email" clearInput="true" (ionBlur)="onEMailBlur(email)" [placeholder]="'general.emailExample' | translate" name="email" [(ngModel)]="user.username" #email="ngModel" type="email" spellcheck="false" autocapitalize="off" required></ion-input>
           </ion-item>
 
           <ion-item class="login-box-input">
-            <ion-label stacked [color]="formErrors.password ? 'danger': 'primary'" translate>general.password</ion-label>
+            <ion-label stacked [color]="formErrors.password ? 'danger': 'primary'">{{ 'general.password' | translate }}</ion-label>
             <ion-input id="password" clearOnEdit="true" [placeholder]="'general.password' | translate" name="password" [(ngModel)]="user.password" type="password" required></ion-input>
           </ion-item>
 

src/app/modules/main/main.module.ts

@@ -21,7 +21,7 @@ import { LoginPage } from './components/login/login';
       { path: 'main', component: MainPage },
       { path: 'login', component: LoginPage },
     ]),
-    TranslateModule.forRoot(),
+    TranslateModule,
   ],
   declarations: [
     MainPage,

src/app/modules/tiles/components/clock/clock.ts

@@ -7,15 +7,11 @@ import {
   OnDestroy,
 } from '@angular/core';
 import * as dayjs from 'dayjs';
-import ChartModuleMore from 'highcharts/highcharts-more';
 import * as Highcharts from 'highcharts';
-import HCSoldGauge from 'highcharts/modules/solid-gauge';
 import { TileBaseDirective } from '../../models/basetile.model';
 import { Setting } from '../../models/setting.model';
 import { Events } from 'src/app/core/services/events.service';
 
-ChartModuleMore(Highcharts);
-HCSoldGauge(Highcharts);
 
 @Component({
   selector: 'grid-clock',
@@ -179,6 +175,12 @@ export class ClockTileComponent
   }
 
   ngOnInit(): void {
+    // load Highcharts modules dynamically (ESM) to avoid top-level call issues
+    Promise.all([
+      import('highcharts/esm/highcharts-more').then(m => (m && (m as any).default ? (m as any).default : m)(Highcharts)),
+      import('highcharts/esm/modules/solid-gauge').then(m => (m && (m as any).default ? (m as any).default : m)(Highcharts)),
+    ]).catch(() => {});
+
     this.setMathBounce();
 
     this.events.subscribe({

src/app/modules/tiles/tiles.module.ts

@@ -21,7 +21,7 @@ import { CoreModule } from 'src/app/core/core.module';
     FormsModule,
     IonicModule,
     HighchartsChartModule,
-    TranslateModule.forRoot(),
+    TranslateModule.forChild(),
   ],
   exports: [
     ClockTileComponent,

src/test.ts

@@ -7,14 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -11,13 +11,14 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "strictNullChecks": true,
-    "target": "es2015",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }