Upgrade to Angular 16 (SAP#18022)

Migration: - Nx migrate to 16.10.0 - Nx updated "@angular/" packages to 16.2.8, "@angular-devkit/" to 16.2.5 and "@angular-eslint/" to 16.2.0 - manual bump "@angular/" to 16.2.10 - manual bump "@angular-devkit/" to 16.2.7 - manual bump "ngx-infinite-scroll" to v16.0.0 - manual bump "@ng-select/ng-select" to v11.1.1 - manual bump "@angular-eslint/schematics" to v16.2.0 - manual bump "@ngrx/" to v16.0.1 - bump versions in librariers - automatic migration - changes from "@nrwl" to "@nx" - automatic migration - removed deprecated "CanActivate" interface - fixed type errors after TypeScript upgrade - went through Angular update guide Build issues: - remove 'entryComponents' from modules: See: https://github.com/angular/angular/blob/229331e11b6c214f74c9801aa52eb9cd47d7fc76/CHANGELOG.md?plain=1#L732 - handle new type of 'routerEvent' property from Scroll class. See: https://github.com/angular/angular/blob/b9a4941a327954c5c6b06a995de8f959ee0d63f6/packages/router/src/events.ts#L586 - schematics - removed 'defaultProject' that's no longer part of angular.json - schematics - addressed changes in SchematicTestRunner API - ssr - "renderModuleFactor" has been removed, use "renderModule" instead Linting issues: - added "plugin:@angular-eslint/recommended" to .eslintrc.json - added to project rules removed from "@angular-eslint". See: ng-cli-compat config does not work with eslint-plugin-jsdoc >=42.0.0 angular-eslint/angular-eslint#1353 (comment) - added "tsconfig.base.json" required by "@nx/eslint-plugin" - all errors related to "@angular-eslint/no-empty-lifecycle-method" marked as warnings - updated "validate-lint.sh" with a new path to nx Unit tests issues: - set clearContext: true in all karma config files to avoid Some of your tests did a full page reload! error - fixed issues caused by changes in Router API - events: Observable<RouterEvent> -> events: Observable<Event> - fixed issues with jest.spyOn when used on properties that are not configurable - caused by zone.js update (see: zone.js update 0.13.1 regression with Jest mock Cannot redefine property angular/angular#50756 (comment)) - fixed Error: NG04002: Cannot match any routes. that causes an infinite loop during running tests. See: https://github.com/angular/angular/blob/main/CHANGELOG.md#router-17 - changed waitForAsync causing issues to async in unit-level-order-overview.component.spec.ts - fix async test in quick-order.service.spec.ts causing errors thrown in afterAll - TS issue - observable.toPromise() -> firstValueFrom(observable) in tests for schematics - updated schematics snapshot - removed globalSetup: 'jest-preset-angular/global-setup' as it is no longer needed and to avoid ngcc warning
crisli001 · Nov 3, 2023 · 8c6635b · 8c6635b
1 parent e764352
commit 8c6635b
Show file tree

Hide file tree

Showing 200 changed files with 12,765 additions and 9,015 deletions.
diff --git a/.eslintrc.json b/.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"
       }
     }
   ]

diff --git a/.github/api-extractor-action/tsconfig.json b/.github/api-extractor-action/tsconfig.json
@@ -1,29 +1,34 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es2019",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es2019", "esnext.bigint", "es2020.string", "es2020.symbol.wellknown"],  /* Specify library files to be included in the compilation. */
-    "allowJs": false,                       /* Allow javascript files to be compiled. */
-    "checkJs": false,                       /* Report errors in .js files. */
-    "declaration": false,                   /* Generates corresponding '.d.ts' file. */
-    "declarationMap": false,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": false,                     /* Generates corresponding '.map' file. */
+    "target": "es2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "es2019",
+      "esnext.bigint",
+      "es2022.string",
+      "es2022.symbol.wellknown"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": false /* Allow javascript files to be compiled. */,
+    "checkJs": false /* Report errors in .js files. */,
+    "declaration": false /* Generates corresponding '.d.ts' file. */,
+    "declarationMap": false /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "sourceMap": false /* Generates corresponding '.map' file. */,
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
 
     /* Additional Checks */
-    "noUnusedLocals": true,                /* Report errors on unused locals. */
-    "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
 
     /* Module Resolution Options */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "esModuleInterop": false,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": false /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
 
     /* Advanced Options */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   }
 }
diff --git a/.github/cache-builded-libs/tsconfig.json b/.github/cache-builded-libs/tsconfig.json
@@ -1,29 +1,34 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es2019",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es2019", "esnext.bigint", "es2020.string", "es2020.symbol.wellknown"],  /* Specify library files to be included in the compilation. */
-    "allowJs": false,                       /* Allow javascript files to be compiled. */
-    "checkJs": false,                       /* Report errors in .js files. */
-    "declaration": false,                   /* Generates corresponding '.d.ts' file. */
-    "declarationMap": false,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    "sourceMap": false,                     /* Generates corresponding '.map' file. */
+    "target": "es2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "es2019",
+      "esnext.bigint",
+      "es2022.string",
+      "es2022.symbol.wellknown"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": false /* Allow javascript files to be compiled. */,
+    "checkJs": false /* Report errors in .js files. */,
+    "declaration": false /* Generates corresponding '.d.ts' file. */,
+    "declarationMap": false /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "sourceMap": false /* Generates corresponding '.map' file. */,
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
 
     /* Additional Checks */
-    "noUnusedLocals": true,                /* Report errors on unused locals. */
-    "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
 
     /* Module Resolution Options */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "esModuleInterop": false,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": false /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
 
     /* Advanced Options */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -70,3 +70,5 @@ Thumbs.db
 
 **/git-ignore
 
+.nx/cache
+
diff --git a/ci-scripts/validate-lint.sh b/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 "-----"
 

diff --git a/core-libs/setup/jest.config.js b/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>/',
   }),

diff --git a/core-libs/setup/package.json b/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": {

diff --git a/core-libs/setup/ssr/logger/loggers/default-express-server-logger.spec.ts b/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', () => {

diff --git a/core-libs/setup/ssr/providers/server-request-origin.spec.ts b/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('');
       });
     });
   });

diff --git a/core-libs/setup/ssr/providers/server-request-url.spec.ts b/core-libs/setup/ssr/providers/server-request-url.spec.ts
@@ -3,8 +3,14 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
+jest.mock('@angular/core', () => {
+  return {
+    ...jest.requireActual('@angular/core'),
+    inject: jest.fn(),
+  };
+});
 
-import * as injectFn from '@angular/core';
+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 +19,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) => {
         if (token.toString() === SERVER_REQUEST_URL.toString()) {
           return mockOrigin;
         }
@@ -28,7 +34,7 @@ describe('serverRequestUrlFactory', () => {
       const mockOrigin = 'https://express.origin.com';
       const mockUrl = '/home';
 
-      jest.spyOn(injectFn, 'inject').mockImplementation((token) => {
+      (inject as jest.Mock).mockImplementation((token) => {
         if (token.toString() === SERVER_REQUEST_ORIGIN.toString()) {
           return mockOrigin;
         }

diff --git a/core-libs/setup/tsconfig.lib.json b/core-libs/setup/tsconfig.lib.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "declarationMap": true,
-    "module": "es2020",
+    "module": "es2022",
     "moduleResolution": "node",
     "declaration": true,
     "sourceMap": true,
@@ -12,7 +12,7 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "types": [],
-    "lib": ["es2020", "dom"],
+    "lib": ["es2022", "dom"],
     "paths": {
       "@spartacus/cart/base/assets": ["dist/cart/base/assets"],
       "@spartacus/cart/base/components/add-to-cart": [

diff --git a/docs/libs/creating-lib.md b/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"
   }
 }
 ```

diff --git a/feature-libs/asm/jest.schematics.config.js b/feature-libs/asm/jest.schematics.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>/',
   }),

diff --git a/feature-libs/asm/karma.conf.js b/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,
       },

diff --git a/feature-libs/asm/package.json b/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",