Update to Angular V18

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/.angular
 
 # local env files
 .env.local

angular.json

@@ -29,7 +29,13 @@
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "src/assets/styles/tailwind.css",
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -61,23 +67,24 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "notus-angular:build"
+            "buildTarget": "notus-angular:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "notus-angular:build:production"
+              "buildTarget": "notus-angular:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "notus-angular:build"
+            "buildTarget": "notus-angular:build"
           }
         },
         "test": {
@@ -123,6 +130,9 @@
           }
         }
       }
-    }},
-  "defaultProject": "notus-angular"
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
 }

browserslist

@@ -9,4 +9,6 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+not kaios 2.5
+not op_mini all

package.json

@@ -15,36 +15,36 @@
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm start"
   },
   "dependencies": {
-    "@angular/animations": "11.2.5",
-    "@angular/common": "11.2.5",
-    "@angular/compiler": "11.2.5",
-    "@angular/core": "11.2.5",
-    "@angular/forms": "11.2.5",
-    "@angular/platform-browser": "11.2.5",
-    "@angular/platform-browser-dynamic": "11.2.5",
-    "@angular/router": "11.2.5",
+    "@angular/animations": "18.2.3",
+    "@angular/common": "18.2.3",
+    "@angular/compiler": "18.2.3",
+    "@angular/core": "18.2.3",
+    "@angular/forms": "18.2.3",
+    "@angular/platform-browser": "18.2.3",
+    "@angular/platform-browser-dynamic": "18.2.3",
+    "@angular/router": "18.2.3",
     "@fortawesome/fontawesome-free": "5.15.3",
     "@popperjs/core": "2.9.1",
     "@tailwindcss/forms": "0.2.1",
     "chart.js": "2.9.4",
     "rxjs": "6.6.6",
     "tailwindcss": "2.0.4",
     "tslib": "2.1.0",
-    "zone.js": "0.11.4"
+    "zone.js": "0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1102.4",
-    "@angular/cli": "11.2.4",
-    "@angular/compiler-cli": "11.2.5",
-    "@angular/language-service": "11.2.5",
+    "@angular-devkit/build-angular": "18.2.3",
+    "@angular/cli": "18.2.3",
+    "@angular/compiler-cli": "18.2.3",
+    "@angular/language-service": "18.2.3",
     "@types/jasmine": "3.6.6",
     "@types/jasminewd2": "2.0.8",
     "@types/node": "14.14.35",
     "codelyzer": "6.0.1",
     "cross-env": "^7.0.3",
     "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "6.0.0",
-    "karma": "6.2.0",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "4.0.1",
@@ -53,6 +53,6 @@
     "protractor": "7.0.0",
     "ts-node": "9.1.1",
     "tslint": "6.1.3",
-    "typescript": "4.1.5"
+    "typescript": "5.4.5"
   }
-}
+}

src/assets/styles/tailwind.css

@@ -564,15 +564,6 @@ video {
   border-color: #2563eb;
 }
 
-input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #71717a;
-  opacity: 1;
-}
-
-input::placeholder, textarea::placeholder {
-  color: #71717a;
-  opacity: 1;
-}
 
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@@ -581,7 +572,7 @@ select {
   background-size: 1.5em 1.5em;
   padding-right: 2.5rem;
   -webkit-print-color-adjust: exact;
-          color-adjust: exact;
+          print-color-adjust: exact;
 }
 
 [multiple] {
@@ -591,7 +582,7 @@ select {
   background-size: initial;
   padding-right: 0.75rem;
   -webkit-print-color-adjust: unset;
-          color-adjust: unset;
+          print-color-adjust: unset;
 }
 
 
@@ -603,7 +594,7 @@ select {
           appearance: none;
   padding: 0;
   -webkit-print-color-adjust: exact;
-          color-adjust: exact;
+          print-color-adjust: exact;
   display: inline-block;
   vertical-align: middle;
   background-origin: border-box;

src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import "zone.js/dist/zone"; // Included with Angular CLI.
+import "zone.js"; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/test.ts

@@ -1,20 +1,14 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import "zone.js/dist/zone-testing";
+import "zone.js/testing";
 import { getTestBed } from "@angular/core/testing";
 import {
   BrowserDynamicTestingModule,
   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

@@ -10,14 +10,15 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,