core: update to Angular 18 (#92)

Author: eksrha

angular.json

@@ -50,12 +50,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/lib-workspace",
+            "outputPath": {
+              "base": "dist/lib-workspace"
+            },
             "index": "projects/lib-workspace/src/index.html",
-            "main": "projects/lib-workspace/src/main.ts",
-            "polyfills": "projects/lib-workspace/src/polyfills.ts",
+            "polyfills": [
+              "projects/lib-workspace/src/polyfills.ts"
+            ],
             "tsConfig": "projects/lib-workspace/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -65,7 +68,8 @@
             "styles": [
               "projects/lib-workspace/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "projects/lib-workspace/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -90,9 +94,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

package.json

@@ -20,50 +20,51 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/material": "^17.3.10",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
+    "@angular/animations": "^18.2.13",
+    "@angular/cdk": "^18.2.14",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/material": "^18.2.14",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
     "@ng-icons/core": "24",
     "@ng-icons/material-icons": "24",
     "date-fns": "^2.29.3",
     "material-icons": "^1.13.1",
-    "postcss": "^8.4.32",
-    "rxjs": "^7.8.1",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.14.10"
+    "postcss": "^8.5.6",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@angular-eslint/builder": "^17.5.3",
-    "@angular-eslint/eslint-plugin": "^17.5.3",
-    "@angular-eslint/eslint-plugin-template": "^17.5.3",
-    "@angular-eslint/schematics": "^17.5.3",
-    "@angular-eslint/template-parser": "^17.5.3",
-    "@angular/cli": "^17.3.11",
-    "@angular/compiler-cli": "^17.3.12",
+    "@angular-devkit/build-angular": "^18.2.20",
+    "@angular-eslint/builder": "^18.4.3",
+    "@angular-eslint/eslint-plugin": "^18.4.3",
+    "@angular-eslint/eslint-plugin-template": "^18.4.3",
+    "@angular-eslint/schematics": "^18.4.3",
+    "@angular-eslint/template-parser": "^18.4.3",
+    "@angular/cli": "^18.2.20",
+    "@angular/compiler-cli": "^18.2.13",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "^18.19.3",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "@typescript-eslint/types": "^8.35.0",
+    "@typescript-eslint/utils": "^8.35.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.57.0",
+    "eslint": "^9.29.0",
     "jasmine-core": "~5.1.1",
     "karma": "~6.3.0",
     "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.3.0",
+    "ng-packagr": "^18.2.1",
     "prettier": "^2.8.3",
     "prettier-eslint": "^15.0.1",
     "sass": "^1.69.5",
     "typescript": "~5.4.5"
   }
-}
+}

projects/lib-workspace/src/styles.scss

@@ -10,16 +10,16 @@
 @include fsc.core();
 @include fsc.roboto();
 
-$my-typography: mat.define-typography-config(
+$my-typography: mat.m2-define-typography-config(
   $font-family: 'Roboto-local',
 );
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme(
+$dark-theme: mat.m2-define-dark-theme(
   (
     color: (
-      primary: mat.define-palette(palettes.$md-primary),
-      accent: mat.define-palette(palettes.$md-accent),
+      primary: mat.m2-define-palette(palettes.$md-primary),
+      accent: mat.m2-define-palette(palettes.$md-accent),
     ),
     // Only include `typography` and `density` in the default dark theme.
     typography: $my-typography,
@@ -28,11 +28,11 @@ $dark-theme: mat.define-dark-theme(
 );
 
 // Define a light theme
-$light-theme: mat.define-light-theme(
+$light-theme: mat.m2-define-light-theme(
   (
     color: (
-      primary: mat.define-palette(palettes.$md-primary),
-      accent: mat.define-palette(palettes.$md-accent),
+      primary: mat.m2-define-palette(palettes.$md-primary),
+      accent: mat.m2-define-palette(palettes.$md-accent),
     ),
   )
 );

tsconfig.json

@@ -5,6 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -17,7 +18,6 @@
       ]
     },
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,