chore: CXSPA-4724 Upgrade to Angular 16

.eslintrc.json

@@ -8,11 +8,12 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "./tools/eslint-plugins/legacy-ng-cli-compat",
+        "./tools/eslint-plugins/legacy-ng-cli-compat--formatting-add-on"
       ],
-      "plugins": ["deprecation", "@typescript-eslint", "@nrwl/nx"],
+      "plugins": ["deprecation", "@typescript-eslint", "@nx"],
       "rules": {
         "@angular-eslint/no-host-metadata-property": "off",
         "@typescript-eslint/no-empty-interface": "off",
@@ -69,7 +70,7 @@
         "max-len": "off",
         "linebreak-style": ["error", "unix"],
         "no-underscore-dangle": "off",
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "allow": [],
@@ -108,7 +109,7 @@
     {
       "files": ["*.module.ts"],
       "rules": {
-        "@nrwl/nx/workspace/use-default-provide-config": "error"
+        "@nx/workspace/use-default-provide-config": "error"
       }
     }
   ]

.github/workflows/ci-merge-checks.yml

@@ -5,6 +5,7 @@ on:
       - develop
       - develop-*
       - release/**
+      - epic/**
   workflow_dispatch:
     # empty as it is used only to manually trigger the workflow
 

.github/workflows/ci-pull-request-status.yml

@@ -5,6 +5,7 @@ on:
       - develop
       - develop-*
       - release/**
+      - epic/**
   workflow_dispatch:
     # empty as it is used only to manually trigger the workflow
 

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on:
       - develop
       - develop-*
       - release/**
+      - epic/**
   workflow_dispatch:
     # empty as it is used only to manually trigger the workflow
 

.gitignore

@@ -70,3 +70,5 @@ Thumbs.db
 
 **/git-ignore
 
+
+.nx/cache

.prettierignore

@@ -3,3 +3,5 @@ feature-libs/smartedit/assets/webApplicationInjector.js
 **/*.md
 **/*.yml
 coverage
+
+/.nx/cache

ci-scripts/validate-lint.sh

@@ -83,7 +83,7 @@ fi
 validateStylesLint
 
 echo "Validating code linting"
-node --max_old_space_size=3584 ./node_modules/@nrwl/cli/bin/nx run-many --all --target=lint
+node --max_old_space_size=3584 ./node_modules/nx/bin/nx run-many --all --target=lint
 
 echo "-----"
 

core-libs/setup/jest.config.js

@@ -5,7 +5,6 @@ const { defaultTransformerOptions } = require('jest-preset-angular/presets');
 /** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 module.exports = {
   preset: 'jest-preset-angular',
-  globalSetup: 'jest-preset-angular/global-setup',
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
     prefix: '<rootDir>/',
   }),

core-libs/setup/package.json

@@ -19,15 +19,15 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/core": "^15.2.9",
+    "@angular/core": "^16.2.10",
     "@spartacus/cart": "6.6.0-1",
     "@spartacus/core": "6.6.0-1",
     "@spartacus/order": "6.6.0-1",
     "@spartacus/user": "6.6.0-1"
   },
   "optionalDependencies": {
-    "@angular/platform-server": "^15.2.9",
-    "@nguniversal/express-engine": "^15.2.0",
+    "@angular/platform-server": "^16.2.10",
+    "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2"
   },
   "publishConfig": {

core-libs/setup/ssr/logger/loggers/default-express-server-logger.spec.ts

@@ -1,4 +1,11 @@
-import * as angularCore from '@angular/core';
+jest.mock('@angular/core', () => {
+  return {
+    ...jest.requireActual('@angular/core'),
+    isDevMode: jest.fn(),
+  };
+});
+
+import { isDevMode } from '@angular/core';
 import { Request } from 'express';
 import { DefaultExpressServerLogger } from './default-express-server-logger';
 
@@ -37,7 +44,7 @@ describe('DefaultExpressServerLogger', () => {
 
     describe('is not dev mode', () => {
       beforeEach(() => {
-        jest.spyOn(angularCore, 'isDevMode').mockReturnValue(false);
+        (isDevMode as jest.Mock).mockReturnValue(false);
       });
 
       it('should log proper shape of the JSON', () => {
@@ -113,7 +120,7 @@ describe('DefaultExpressServerLogger', () => {
 
     describe('is dev mode', () => {
       beforeEach(() => {
-        jest.spyOn(angularCore, 'isDevMode').mockReturnValue(true);
+        (isDevMode as jest.Mock).mockReturnValue(true);
       });
 
       it('should log proper shape of the JSON', () => {

core-libs/setup/ssr/providers/server-request-origin.spec.ts

@@ -3,39 +3,48 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import * as injectFn from '@angular/core';
 import { serverRequestOriginFactory } from './server-request-origin';
 
+jest.mock('@angular/core', () => {
+  return {
+    ...jest.requireActual('@angular/core'),
+    inject: jest.fn(),
+  };
+});
+
+import { inject } from '@angular/core';
+
 describe('serverRequestOriginFactory', () => {
   describe('when SERVER_REQUEST_ORIGIN is present', () => {
     it('should return SERVER_REQUEST_ORIGIN', () => {
       const mockOrigin = 'https://express.origin.com';
-      jest.spyOn(injectFn, 'inject').mockReturnValue(mockOrigin);
+      (inject as jest.Mock).mockReturnValue(mockOrigin);
 
       const result = serverRequestOriginFactory()();
+
       expect(result).toEqual(mockOrigin);
     });
   });
   describe('when SERVER_REQUEST_ORIGIN is NOT present', () => {
     beforeEach(() => {
-      jest.spyOn(injectFn, 'inject').mockReturnValue(null);
+      (inject as jest.Mock).mockReturnValue(null);
     });
 
     describe('and when options.serverRequestOrigin is present', () => {
-      it('should return options.serverRequestOrigin', () => {
+      it('should return options.serverRequestOrigin', (done) => {
         const optionsOrigin = 'https://express.origin.com';
         const result = serverRequestOriginFactory({
           serverRequestOrigin: optionsOrigin,
         })();
+        done();
         expect(result).toEqual(optionsOrigin);
       });
     });
     describe('and when options.serverRequestOrigin is NOT present', () => {
       it('should throw an error if ', () => {
         expect(() => {
           serverRequestOriginFactory()();
-        }).toThrowError();
+        }).toThrowError('');
       });
     });
   });

core-libs/setup/ssr/providers/server-request-url.spec.ts

@@ -4,7 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as injectFn from '@angular/core';
+jest.mock('@angular/core', () => {
+  return {
+    ...jest.requireActual('@angular/core'),
+    inject: jest.fn(),
+  };
+});
+
+import { inject } from '@angular/core';
 import { INITIAL_CONFIG } from '@angular/platform-server';
 import { SERVER_REQUEST_ORIGIN, SERVER_REQUEST_URL } from '@spartacus/core';
 import { serverRequestUrlFactory } from './server-request-url';
@@ -13,7 +20,7 @@ describe('serverRequestUrlFactory', () => {
   describe('when SERVER_REQUEST_URL is present', () => {
     it('should return SERVER_REQUEST_URL', () => {
       const mockOrigin = 'https://express.origin.com';
-      jest.spyOn(injectFn, 'inject').mockImplementation((token) => {
+      (inject as jest.Mock).mockImplementation((token: any) => {
         if (token.toString() === SERVER_REQUEST_URL.toString()) {
           return mockOrigin;
         }
@@ -28,7 +35,7 @@ describe('serverRequestUrlFactory', () => {
       const mockOrigin = 'https://express.origin.com';
       const mockUrl = '/home';
 
-      jest.spyOn(injectFn, 'inject').mockImplementation((token) => {
+      (inject as jest.Mock).mockImplementation((token: any) => {
         if (token.toString() === SERVER_REQUEST_ORIGIN.toString()) {
           return mockOrigin;
         }

docs/libs/creating-lib.md

@@ -70,7 +70,7 @@ module.exports = function (config) {
       require('karma-junit-reporter'),
     ],
     client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      clearContext: true, // close Jasmine Spec Runner output in browser to avoid ''Some of your tests did a full page reload!' error when '--no-watch' is active
     },
     reporters: ['progress', 'kjhtml', 'dots', 'junit'],
     junitReporter: {
@@ -262,8 +262,8 @@ Use the following template:
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "forceConsistentCasingInFileNames": true,
-    "target": "es2020",
-    "module": "es2020",
+    "target": "es2022",
+    "module": "es2022",
     "moduleResolution": "node",
     "declaration": true,
     "declarationMap": true,
@@ -292,15 +292,15 @@ Use the following template:
 }
 ```
 
-- `tsconfig.spec.json` - add `"target": "es2020", "module": "es2020"` in `"compilerOptions"`:
+- `tsconfig.spec.json` - add `"target": "es2022", "module": "es2022"` in `"compilerOptions"`:
 
 ```json
 {
   /* ... */
   "compilerOptions": {
     /* ... */
-    "target": "es2020",
-    "module": "es2020"
+    "target": "es2022",
+    "module": "es2022"
   }
 }
 ```

feature-libs/asm/karma.conf.js

@@ -14,7 +14,7 @@ module.exports = function (config) {
       require('karma-junit-reporter'),
     ],
     client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      clearContext: true, // close Jasmine Spec Runner output in browser to avoid 'Some of your tests did a full page reload!' error when '--no-watch' is active
       jasmine: {
         random: false,
       },

feature-libs/asm/package.json

@@ -25,14 +25,14 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular-devkit/schematics": "^15.2.9",
-    "@angular/common": "^15.2.9",
-    "@angular/core": "^15.2.9",
-    "@angular/forms": "^15.2.9",
-    "@angular/platform-browser": "^15.2.9",
-    "@ng-select/ng-select": "^10.0.3",
-    "@ngrx/effects": "^15.3.0",
-    "@ngrx/store": "^15.3.0",
+    "@angular-devkit/schematics": "^16.2.7",
+    "@angular/common": "^16.2.10",
+    "@angular/core": "^16.2.10",
+    "@angular/forms": "^16.2.10",
+    "@angular/platform-browser": "^16.2.10",
+    "@ng-select/ng-select": "^11.1.1",
+    "@ngrx/effects": "^16.0.1",
+    "@ngrx/store": "^16.0.1",
     "@spartacus/cart": "6.6.0-1",
     "@spartacus/core": "6.6.0-1",
     "@spartacus/order": "6.6.0-1",

feature-libs/cart/base/components/cart-proceed-to-checkout/cart-proceed-to-checkout.component.spec.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NavigationEnd, Router, RouterEvent } from '@angular/router';
+import { Event, NavigationEnd, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { I18nTestingModule } from '@spartacus/core';
 import { ProgressButtonModule } from '@spartacus/storefront';
@@ -15,7 +15,7 @@ class MockUrlPipe implements PipeTransform {
   transform() {}
 }
 
-let mockRouterEvents$ = new Subject<RouterEvent>();
+let mockRouterEvents$ = new Subject<Event>();
 class MockRouter implements Partial<Router> {
   events = mockRouterEvents$;
   routerState = { snapshot: { root: {} } } as any;

feature-libs/cart/base/core/guards/cart-validation.guard.ts

@@ -5,7 +5,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate, Router, UrlTree } from '@angular/router';
+import { Router, UrlTree } from '@angular/router';
 import {
   ActiveCartFacade,
   CartValidationFacade,
@@ -24,7 +24,7 @@ import { CartValidationStateService } from '../services/cart-validation-state.se
 @Injectable({
   providedIn: 'root',
 })
-export class CartValidationGuard implements CanActivate {
+export class CartValidationGuard {
   constructor(
     protected cartValidationService: CartValidationFacade,
     protected semanticPathService: SemanticPathService,

feature-libs/cart/karma.conf.js

@@ -14,7 +14,7 @@ module.exports = function (config) {
       require('karma-junit-reporter'),
     ],
     client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      clearContext: true, // close Jasmine Spec Runner output in browser to avoid ''Some of your tests did a full page reload!' error when '--no-watch' is active
       jasmine: {
         random: false,
       },

feature-libs/cart/package.json

@@ -29,14 +29,14 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular-devkit/schematics": "^15.2.9",
-    "@angular/common": "^15.2.9",
-    "@angular/core": "^15.2.9",
-    "@angular/forms": "^15.2.9",
-    "@angular/router": "^15.2.9",
-    "@ng-select/ng-select": "^10.0.3",
-    "@ngrx/effects": "^15.3.0",
-    "@ngrx/store": "^15.3.0",
+    "@angular-devkit/schematics": "^16.2.7",
+    "@angular/common": "^16.2.10",
+    "@angular/core": "^16.2.10",
+    "@angular/forms": "^16.2.10",
+    "@angular/router": "^16.2.10",
+    "@ng-select/ng-select": "^11.1.1",
+    "@ngrx/effects": "^16.0.1",
+    "@ngrx/store": "^16.0.1",
     "@spartacus/core": "6.6.0-1",
     "@spartacus/schematics": "6.6.0-1",
     "@spartacus/storefront": "6.6.0-1",