feat: upgrade to Angular 16

.github/workflows/single-spa-angular.yml

@@ -25,11 +25,11 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.13.0
+          node-version: '16'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: yarn --immutable
+        run: yarn --pure-lockfile
 
       - name: Run ESLint
         run: yarn lint

apps/chat/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/elements/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/navbar/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/noop-zone/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/parcel/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/root-config/src/index.ejs

@@ -10,12 +10,18 @@
       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.11.5/zone.min.js"
-      integrity="sha512-fm6Z1HSpsFZ5H96eo9QkRhQEHhqCwAsjLUFv8TbnqCOIOzVgj2k9FTOqv4GTF1GlOsLHeo3s6Xm0fT5IF4KgIw=="
+      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>
+      referrerpolicy="no-referrer">
+    </script>
+    <% } %>
 
     <meta name="importmap-type" content="systemjs-importmap" />
     <script type="systemjs-importmap">
@@ -80,12 +86,16 @@
     </script>
     <% } %>
 
+    <% if (htmlWebpackPlugin.options.isDevelopment) { %>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.14.2/system.js"></script>
+    <% } else { %>
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.12.1/system.min.js"
-      integrity="sha512-hEUZNXwXBrWqdzUGvBheCYyBwT3OfFuc1HwumDzeMDK54TUioKjanhZiylIyREGBF/XXHtRx1q/Z4O1XANG4zg=="
+      src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.14.2/system.min.js"
+      integrity="sha512-l3drpKk7tDSsyUHLqk2a2qBpCWJXL8W0JfYn/OJLN1DPle/ltJvQ9TPyOJcbuKw1ou9SKHiUOMx5MgzkeW00KA=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
-    ></script>
+      ></script>
+    <% } %>
   </head>
   <body></body>
 </html>

apps/shop/project.json

@@ -64,7 +64,7 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "shop:build"
+        "browserTarget": "shop:build:development"
       },
       "configurations": {
         "production": {

apps/shop/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/shop/src/main.single-spa.ts

@@ -12,17 +12,10 @@ if (environment.production) {
 }
 
 const lifecycles = singleSpaAngular({
-  bootstrapFunction: async () => {
-    await loadMontserrat();
-    const ngModuleRef = await platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(
-      AppModule,
-    );
-    ngModuleRef.onDestroy(() => {
-      // This is used only for testing purposes.
-      window.dispatchEvent(new CustomEvent('shopDestroyed'));
-    });
-    return ngModuleRef;
-  },
+  bootstrapFunction: () =>
+    loadMontserrat().then(() =>
+      platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule),
+    ),
   template: '<shop-root />',
   Router,
   NavigationStart,

apps/shop/tsconfig.json

@@ -1,13 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
   "references": [
     {
       "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.editor.json"
     }
   ],
   "compilerOptions": {

apps/standalone/project.json

@@ -63,7 +63,7 @@
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
       "options": {
-        "browserTarget": "standalone:build"
+        "browserTarget": "standalone:build:development"
       },
       "configurations": {
         "production": {

apps/standalone/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    provideRouter([
+      {
+        path: '',
+        loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
+      },
+    ]),
+    { provide: APP_BASE_HREF, useValue: '/standalone' },
+  ],
+};

apps/standalone/src/environments/environment.ts

@@ -1,16 +1,3 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * 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/plugins/zone-error';  // Included with Angular CLI.

apps/standalone/src/main.single-spa.ts

@@ -1,34 +1,18 @@
-import { importProvidersFrom, NgZone } from '@angular/core';
-import { NavigationStart, Router, RouterModule } from '@angular/router';
-import { APP_BASE_HREF } from '@angular/common';
+import { NgZone } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { singleSpaAngular, enableProdMode } from 'single-spa-angular';
 
-import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
 
 if (environment.production) {
   enableProdMode();
 }
 
 const lifecycles = singleSpaAngular({
-  bootstrapFunction: () =>
-    bootstrapApplication(AppComponent, {
-      providers: [
-        importProvidersFrom(BrowserAnimationsModule),
-        importProvidersFrom(
-          RouterModule.forRoot([
-            {
-              path: '',
-              loadComponent: () =>
-                import('./app/pages/home/home.component').then(m => m.HomeComponent),
-            },
-          ]),
-        ),
-        { provide: APP_BASE_HREF, useValue: '/standalone' },
-      ],
-    }),
+  bootstrapFunction: () => bootstrapApplication(AppComponent, appConfig),
   template: '<standalone-root />',
   Router,
   NavigationStart,

decorate-angular-cli.js

@@ -27,10 +27,10 @@ const cp = require('child_process');
 const isWindows = os.platform() === 'win32';
 let output;
 try {
-  output = require('@nrwl/workspace').output;
+  output = require('@nx/workspace').output;
 } catch (e) {
   console.warn(
-    'Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.',
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nx/workspace is installed.',
   );
   process.exit(0);
 }
@@ -51,7 +51,7 @@ function patchAngularCLI(initPath) {
       initPath,
       `
 if (!process.env['NX_CLI_SET']) {
-  const { output } = require('@nrwl/workspace');
+  const { output } = require('@nx/workspace');
   output.warn({ title: 'The Angular CLI was invoked instead of the Nx CLI. Use "npx ng [command]" or "nx [command]" instead.' });
 }
 ${angularCLIInit}

libs/single-spa-angular/elements/src/index.ts

@@ -1,5 +1,5 @@
-import { LifeCycles } from 'single-spa';
-import { NgElement } from '@angular/elements';
+import type { LifeCycles } from 'single-spa';
+import type { NgElement } from '@angular/elements';
 import {
   BaseSingleSpaAngularOptions,
   getContainerElementAndSetTemplate,

libs/single-spa-angular/project.json

@@ -6,10 +6,11 @@
   "prefix": "single-spa-angular",
   "targets": {
     "build": {
-      "executor": "@nrwl/angular:package",
+      "executor": "@nx/angular:package",
       "options": {
         "tsConfig": "libs/single-spa-angular/tsconfig.lib.json",
-        "project": "libs/single-spa-angular/ng-package.json"
+        "project": "libs/single-spa-angular/ng-package.json",
+        "updateBuildableProjectDepsInPackageJson": true
       }
     }
   },

libs/single-spa-angular/src/single-spa-angular.ts

@@ -142,7 +142,7 @@ async function mount(
     }
 
     bootstrappedOptions.bootstrappedNgZone = ngZone;
-    bootstrappedOptions.bootstrappedNgZone['_inner']._properties[zoneIdentifier] = true;
+    (bootstrappedOptions.bootstrappedNgZone as any)._inner._properties[zoneIdentifier] = true;
     window.addEventListener('single-spa:routing-event', bootstrappedOptions.routingEventListener!);
   }
 
@@ -189,8 +189,5 @@ function skipLocationChangeOnNonImperativeRoutingTriggers(
     }
   });
 
-  // The `ApplicationRef` also has `onDestroy` method, but it's marked as internal.
-  ngModuleRefOrAppRef['onDestroy'](() => {
-    subscription.unsubscribe();
-  });
+  ngModuleRefOrAppRef.onDestroy(() => subscription.unsubscribe());
 }

libs/single-spa-angular/webpack/index.ts

@@ -241,7 +241,7 @@ function createLogger() {
   try {
     // If we're in an Nx workspace then use its logger.
     // eslint-disable-next-line
-    const { output } = require('@nrwl/workspace');
+    const { output } = require('@nx/workspace');
     return {
       warn: (message: string) => output.warn({ title: message }),
     };