feat: upgrade to Angular 18

single-spa · Sep 9, 2024 · 1785e3e · 1785e3e
1 parent c8b18ff
commit 1785e3e
Show file tree

Hide file tree

Showing 15 changed files with 4,508 additions and 4,352 deletions.
diff --git a/.gitignore b/.gitignore
@@ -56,4 +56,5 @@ migrations.json
 !.yarn/sdks
 !.yarn/versions
 
-.nx/cache
+.nx/cache
+.nx/workspace-data
diff --git a/.prettierignore b/.prettierignore
@@ -18,4 +18,5 @@ assets
 .husky
 *.ejs
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data
diff --git a/apps/chat/project.json b/apps/chat/project.json
@@ -64,11 +64,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "chat:build:development"
+        "buildTarget": "chat:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "chat:build:production"
+          "buildTarget": "chat:build:production"
         }
       }
     }

diff --git a/apps/elements/project.json b/apps/elements/project.json
@@ -71,11 +71,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "elements:build:development"
+        "buildTarget": "elements:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "elements:build:production"
+          "buildTarget": "elements:build:production"
         }
       }
     }

diff --git a/apps/elements/src/app/app.module.ts b/apps/elements/src/app/app.module.ts
@@ -1,13 +1,14 @@
 import { NgModule, Injector, DoBootstrap } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { createCustomElement } from '@angular/elements';
 
 import { AppComponent } from './app.component';
 
 @NgModule({
-  imports: [BrowserModule, HttpClientModule],
   declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class AppModule implements DoBootstrap {
   constructor(private injector: Injector) {}

diff --git a/apps/navbar/project.json b/apps/navbar/project.json
@@ -64,11 +64,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "navbar:build:development"
+        "buildTarget": "navbar:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "navbar:build:production"
+          "buildTarget": "navbar:build:production"
         }
       }
     }

diff --git a/apps/noop-zone/project.json b/apps/noop-zone/project.json
@@ -64,11 +64,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "noop-zone:build:development"
+        "buildTarget": "noop-zone:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "noop-zone:build:production"
+          "buildTarget": "noop-zone:build:production"
         }
       }
     }

diff --git a/apps/parcel/project.json b/apps/parcel/project.json
@@ -65,11 +65,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "parcel:build:development"
+        "buildTarget": "parcel:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "parcel:build:production"
+          "buildTarget": "parcel:build:production"
         }
       }
     }

diff --git a/apps/root-config/src/index.ejs b/apps/root-config/src/index.ejs
@@ -10,19 +10,6 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css"
     />
 
-    <% if (htmlWebpackPlugin.options.isDevelopment) { %>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.13.1/zone.js">
-    </script>
-    <% } else { %>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.13.1/zone.min.js"
-      integrity="sha512-+cWrFbFSw+41uXDoayGA63htnbwihSP7gbW5dwd7zK2lf7uvy0TmORZPtlWr/41sHRwSZTkO3Fav7bd8fvLiqg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer">
-    </script>
-    <% } %>
-
     <meta name="importmap-type" content="systemjs-importmap" />
     <script type="systemjs-importmap">
       {
@@ -48,6 +35,7 @@
           "@angular/compiler": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-compiler.js",
 
           "@angular/core/primitives/signals": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core-primitives-signals.js",
+          "@angular/core/primitives/event-dispatch": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core-primitives-event-dispatch.js",
           "@angular/core": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core.js",
 
           "@angular/common": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-common.js",
@@ -79,6 +67,7 @@
           "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.9.3/system/single-spa.min.js",
 
           "@angular/core/primitives/signals": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core-primitives-signals.min.js",
+          "@angular/core/primitives/event-dispatch": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core-primitives-event-dispatch.min.js",
           "@angular/core": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-core.min.js",
 
           "@angular/common": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular/system/es2022/angular-common.min.js",

diff --git a/apps/root-config/src/main.js b/apps/root-config/src/main.js
@@ -1,45 +1,47 @@
-System.import('single-spa').then(({ registerApplication, start }) => {
-  registerApplication({
-    name: 'navbar',
-    app: () => System.import('navbar'),
-    activeWhen: () => true,
-  });
+import('zone.js').then(() => {
+  System.import('single-spa').then(({ registerApplication, start }) => {
+    registerApplication({
+      name: 'navbar',
+      app: () => System.import('navbar'),
+      activeWhen: () => true,
+    });
 
-  registerApplication({
-    name: 'shop',
-    app: () => System.import('shop'),
-    activeWhen: location => location.pathname.startsWith('/shop'),
-  });
+    registerApplication({
+      name: 'shop',
+      app: () => System.import('shop'),
+      activeWhen: location => location.pathname.startsWith('/shop'),
+    });
 
-  registerApplication({
-    name: 'chat',
-    app: () => System.import('chat'),
-    activeWhen: location => location.pathname.startsWith('/chat'),
-  });
+    registerApplication({
+      name: 'chat',
+      app: () => System.import('chat'),
+      activeWhen: location => location.pathname.startsWith('/chat'),
+    });
 
-  registerApplication({
-    name: 'noop-zone',
-    app: () => System.import('noop-zone'),
-    activeWhen: location => location.pathname.startsWith('/noop-zone'),
-  });
+    registerApplication({
+      name: 'noop-zone',
+      app: () => System.import('noop-zone'),
+      activeWhen: location => location.pathname.startsWith('/noop-zone'),
+    });
 
-  registerApplication({
-    name: 'elements',
-    app: () => System.import('elements'),
-    activeWhen: location => location.pathname.startsWith('/elements'),
-  });
+    registerApplication({
+      name: 'elements',
+      app: () => System.import('elements'),
+      activeWhen: location => location.pathname.startsWith('/elements'),
+    });
 
-  registerApplication({
-    name: 'parcel',
-    app: () => System.import('parcel'),
-    activeWhen: location => location.pathname.startsWith('/parcel'),
-  });
+    registerApplication({
+      name: 'parcel',
+      app: () => System.import('parcel'),
+      activeWhen: location => location.pathname.startsWith('/parcel'),
+    });
 
-  registerApplication({
-    name: 'standalone',
-    app: () => System.import('standalone'),
-    activeWhen: location => location.pathname.startsWith('/standalone'),
-  });
+    registerApplication({
+      name: 'standalone',
+      app: () => System.import('standalone'),
+      activeWhen: location => location.pathname.startsWith('/standalone'),
+    });
 
-  start();
+    start();
+  });
 });
diff --git a/apps/shop/project.json b/apps/shop/project.json
@@ -64,11 +64,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "shop:build:development"
+        "buildTarget": "shop:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "shop:build:production"
+          "buildTarget": "shop:build:production"
         }
       }
     }

diff --git a/apps/standalone/project.json b/apps/standalone/project.json
@@ -63,11 +63,11 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "standalone:build:development"
+        "buildTarget": "standalone:build:development"
       },
       "configurations": {
         "production": {
-          "browserTarget": "standalone:build:production"
+          "buildTarget": "standalone:build:production"
         }
       }
     }

diff --git a/nx.json b/nx.json
@@ -1,7 +1,4 @@
 {
-  "affected": {
-    "defaultBase": "master"
-  },
   "tasksRunnerOptions": {
     "default": {
       "options": {
@@ -63,5 +60,7 @@
     }
   },
   "nxCloudAccessToken": "YmQwMTE3MTMtOTE0YS00ZjUwLTliN2ItMWI4N2NmMmQ1MTUzfHJlYWQtd3JpdGU=",
-  "parallel": 1
+  "parallel": 1,
+  "useInferencePlugins": false,
+  "defaultBase": "master"
 }
diff --git a/package.json b/package.json
@@ -82,37 +82,38 @@
     "test:ci:integration": "yarn start-test start:all 8080 cy:run"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "17.0.0",
-    "@angular-devkit/build-angular": "17.0.3",
-    "@angular-devkit/core": "17.0.3",
-    "@angular-devkit/schematics": "17.0.3",
-    "@angular/animations": "17.0.4",
-    "@angular/cli": "~17.0.0",
-    "@angular/common": "17.0.4",
-    "@angular/compiler": "17.0.4",
-    "@angular/compiler-cli": "17.0.4",
-    "@angular/core": "17.0.4",
-    "@angular/elements": "17.0.4",
-    "@angular/forms": "17.0.4",
-    "@angular/language-service": "17.0.4",
-    "@angular/platform-browser": "17.0.4",
-    "@angular/platform-browser-dynamic": "17.0.4",
-    "@angular/router": "17.0.4",
+    "@angular-builders/custom-webpack": "18.0.0",
+    "@angular-devkit/build-angular": "18.2.3",
+    "@angular-devkit/core": "18.2.3",
+    "@angular-devkit/schematics": "18.2.3",
+    "@angular/animations": "18.2.3",
+    "@angular/cli": "~18.2.0",
+    "@angular/common": "18.2.3",
+    "@angular/compiler": "18.2.3",
+    "@angular/compiler-cli": "18.2.3",
+    "@angular/core": "18.2.3",
+    "@angular/elements": "18.2.3",
+    "@angular/forms": "18.2.3",
+    "@angular/language-service": "18.2.3",
+    "@angular/platform-browser": "18.2.3",
+    "@angular/platform-browser-dynamic": "18.2.3",
+    "@angular/router": "18.2.3",
     "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
     "@commitlint/cli": "17.4.0",
     "@commitlint/config-conventional": "17.4.0",
-    "@nx/angular": "17.2.8",
-    "@nx/workspace": "17.2.8",
-    "@schematics/angular": "17.0.3",
+    "@nx/angular": "19.6.5",
+    "@nx/workspace": "19.6.5",
+    "@schematics/angular": "18.2.3",
     "@types/jest": "29.4.4",
     "@types/karma": "^6.1.0",
-    "@types/node": "^16.11.7",
+    "@types/node": "18.19.9",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/single-spa-react": "4.0.0",
     "@types/systemjs": "^6.1.1",
     "@typescript-eslint/eslint-plugin": "6.10.0",
     "@typescript-eslint/parser": "6.10.0",
+    "autoprefixer": "^10.4.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "concurrently": "^5.1.0",
     "cpx": "^1.5.0",
@@ -123,11 +124,11 @@
     "husky": "^7.0.4",
     "jest": "29.4.3",
     "jest-environment-jsdom": "29.4.3",
-    "jest-preset-angular": "13.1.4",
+    "jest-preset-angular": "14.1.1",
     "json5": "^2.2.2",
     "lint-staged": "^12.1.1",
-    "ng-packagr": "17.0.2",
-    "nx": "17.2.8",
+    "ng-packagr": "18.2.1",
+    "nx": "19.6.5",
     "postcss": "^8.3.9",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
@@ -143,9 +144,9 @@
     "style-loader": "^3.3.1",
     "ts-jest": "29.0.5",
     "tslib": "^2.3.0",
-    "typescript": "5.2.2",
-    "webpack-cli": "^4.9.2",
-    "zone.js": "0.14.2"
+    "typescript": "5.5.4",
+    "webpack-cli": "^5.1.4",
+    "zone.js": "~0.14.10"
   },
   "dependencies": {
     "single-spa": ">= 5.4"