fix(a20): support of Angular 20 #11187

Author: satanTime

.circleci/config.yml

@@ -73,6 +73,10 @@ executors:
     docker:
       - image: satantime/puppeteer-node:22.14.0
     resource_class: medium
+  a20:
+    docker:
+      - image: satantime/puppeteer-node:22.14.0
+    resource_class: medium
 
 commands:
   install:
@@ -627,6 +631,7 @@ workflows:
                 - a17
                 - a18
                 - a19
+                - a20
 
       # testing a5 (exceptional)
       - E2E Test:
@@ -707,6 +712,7 @@ workflows:
                 - a17
                 - a18
                 - a19
+                - a20
 
       # testing lib build
       - Lib Build:
@@ -734,6 +740,7 @@ workflows:
                 - a17
                 - a18
                 - a19
+                - a20
 
       # testing lib build
       - Lib Build:

.dockerignore

@@ -16,6 +16,7 @@
 /e2e/a17/node_modules
 /e2e/a18/node_modules
 /e2e/a19/node_modules
+/e2e/a20/node_modules
 /e2e/jasmine/node_modules
 /e2e/jest/node_modules
 /e2e/min/node_modules

.eslintrc.yml

@@ -30,6 +30,7 @@ settings:
         - ./e2e/a17/tsconfig.json
         - ./e2e/a18/tsconfig.json
         - ./e2e/a19/tsconfig.json
+        - ./e2e/a20/tsconfig.json
         - ./e2e/jasmine/tsconfig.json
         - ./e2e/jest/tsconfig.json
         - ./e2e/min/tsconfig.json
@@ -63,6 +64,7 @@ overrides:
         - ./e2e/a17/tsconfig.json
         - ./e2e/a18/tsconfig.json
         - ./e2e/a19/tsconfig.json
+        - ./e2e/a20/tsconfig.json
         - ./e2e/jasmine/tsconfig.json
         - ./e2e/jest/tsconfig.json
         - ./e2e/min/tsconfig.json

.github/dependabot.yml

@@ -153,6 +153,14 @@ updates:
     commit-message:
       prefix: 'chore(deps)'
 
+  - package-ecosystem: 'npm'
+    directory: /e2e/a20/
+    open-pull-requests-limit: 0
+    schedule:
+      interval: 'daily'
+    commit-message:
+      prefix: 'chore(deps)'
+
   - package-ecosystem: 'npm'
     directory: /e2e/jasmine/
     open-pull-requests-limit: 0

CONTRIBUTING.md

@@ -114,21 +114,21 @@ npm run test:debug
 ## How to add a new Angular version
 
 First, you need to install the new Angular version somewhere.
-Below is an example how to add Angular 20 to `ng-mocks`.
+Below is an example how to add Angular 21 to `ng-mocks`.
 
 ### Step #1 - create an empty project
 
-Let's create a fresh project with `@angular/cli` `v20`.
-The name of the project should be `a + version`: `a20`.
+Let's create a fresh project with `@angular/cli` `v21`.
+The name of the project should be `a + version`: `a21`.
 
 ```shell
-npx '@angular/cli@^20' new \
+npx '@angular/cli@^21.0.0-alpha' new \
   --routing \
   --skip-git=true \
   --skip-tests=true \
   --style=css \
   --ssr=false \
-  a20
+  a21
 ```
 
 Basically, the requirements are:
@@ -143,96 +143,101 @@ Basically, the requirements are:
 
 The next step is:
 
-- move `a20` folder to `ng-mocks/e2e` folder
-- delete `.vscode` folder in `ng-mocks/e2e/a20`
-- delete `.editorconfig` file in `ng-mocks/e2e/a20`
-- change `.gitignore` to be the same as in the prev version: `ng-mocks/e2e/a19/.gitignore`
-- change `angular.json` to be similar as in the prev version: `ng-mocks/e2e/a19/angular.json`
-  - `projects/a20/schematics` should be empty
-  - remove `projects/a20/architect/build/options/assets`
-  - remove `projects/a20/architect/build/options/styles`
-  - remove `projects/a20/architect/build/options/scripts`
-  - change `projects/a20/architect/build/options/tsConfig` to `tsconfig.json`
-  - remove `projects/a20/architect/build/configurations/production/budgets`
-  - remove `projects/a20/architect/extract-i18n`
-  - remove `projects/a20/architect/test/options/assets`
-  - remove `projects/a20/architect/test/options/styles`
-  - remove `projects/a20/architect/test/options/scripts`
-  - change `projects/a20/architect/test/options/tsConfig` to `tsconfig.json`
-  - add `projects/a20/architect/test/options/main` with the value of `src/test.ts`
-  - add `projects/a20/architect/test/options/karmaConfig` with the value of `karma.conf.js`
-  - add `projects/lib` as it is in the prev version: `ng-mocks/e2e/a19/angular.json`
-- change `package.json` to be similar as in the prev version: `ng-mocks/e2e/a19/package.json`
-  - `name` should be `a20`
-  - `description` should be `Angular 20`
+- move `a21` folder to `ng-mocks/e2e` folder
+- delete `.vscode` folder in `ng-mocks/e2e/a21`
+- delete `.editorconfig` file in `ng-mocks/e2e/a21`
+- change `.gitignore` to be the same as in the prev version: `ng-mocks/e2e/a20/.gitignore`
+- change `angular.json` to be similar as in the prev version: `ng-mocks/e2e/a20/angular.json`
+  - `projects/a21/schematics` should be empty
+  - remove `projects/a21/architect/build/options/assets`
+  - remove `projects/a21/architect/build/options/styles`
+  - remove `projects/a21/architect/build/options/scripts`
+  - change `projects/a21/architect/build/options/tsConfig` to `tsconfig.json`
+  - remove `projects/a21/architect/build/configurations/production/budgets`
+  - remove `projects/a21/architect/extract-i18n`
+  - remove `projects/a21/architect/test/options/assets`
+  - remove `projects/a21/architect/test/options/styles`
+  - remove `projects/a21/architect/test/options/scripts`
+  - change `projects/a21/architect/test/options/tsConfig` to `tsconfig.json`
+  - add `projects/a21/architect/test/options/main` with the value of `src/test.ts`
+  - add `projects/a21/architect/test/options/karmaConfig` with the value of `karma.conf.js`
+  - add `projects/lib` as it is in the prev version: `ng-mocks/e2e/a20/angular.json`
+  - add `cli/analytics` as it is in the prev version: `ng-mocks/e2e/a20/angular.json`
+- change `package.json` to be similar as in the prev version: `ng-mocks/e2e/a20/package.json`
+  - `name` should be `a21`
+  - `description` should be `Angular 21`
   - `private` should be `true`
-  - replace `scripts` as it is in the prev version: `ng-mocks/e2e/a19/package.json`
-  - remove flexible versions (`^~`) in `dependencies` as it is in the prev version: `ng-mocks/e2e/a19/package.json`
-  - remove flexible versions (`^~`) in `devDependencies` as it is in the prev version: `ng-mocks/e2e/a19/package.json`
+  - replace `scripts` as it is in the prev version: `ng-mocks/e2e/a20/package.json`
+  - remove flexible versions (`^~`) in `dependencies` as it is in the prev version: `ng-mocks/e2e/a20/package.json`
+  - remove flexible versions (`^~`) in `devDependencies` as it is in the prev version: `ng-mocks/e2e/a20/package.json`
+  - in `dependencies`, add `@angular/animations` which supports the desired angular version
   - in `devDependencies`, add `@types/jest`, `jest`, `jest-preset-angular`, `ng-packagr`, `puppeteer`, `ts-node` which support the desired angular version
   - add `engines` with the correct `npm` which supports the desired angular version
 - delete `README.md`
-- merge `tsconfig.app.json` and `tsconfig.spec.json` into `tsconfig.json` as it is in the prev version: `ng-mocks/e2e/a19/tsconfig.json`
+- merge `tsconfig.app.json` and `tsconfig.spec.json` into `tsconfig.json` as it is in the prev version: `ng-mocks/e2e/a20/tsconfig.json`
   - add `compilerOptions/baseUrl`with the value of `./`
-  - add `compilerOptions/types` as it is in the prev version: `ng-mocks/e2e/a19/tsconfig.json`
-  - add `compilerOptions/skipLibCheck` as it is in the prev version: `ng-mocks/e2e/a19/tsconfig.json`
+  - add `compilerOptions/types` as it is in the prev version: `ng-mocks/e2e/a20/tsconfig.json`
+  - add `compilerOptions/skipLibCheck` as it is in the prev version: `ng-mocks/e2e/a20/tsconfig.json`
   - change `compilerOptions/noImplicitOverride` to `false`
-  - add `files` as it is in the prev version: `ng-mocks/e2e/a19/tsconfig.json`
-  - add `include` as it is in the prev version: `ng-mocks/e2e/a19/tsconfig.json`
+  - add `files` as it is in the prev version: `ng-mocks/e2e/a20/tsconfig.json`
+  - add `include` as it is in the prev version: `ng-mocks/e2e/a20/tsconfig.json`
   - delete `tsconfig.app.json`
   - delete `tsconfig.spec.json`
 - add `.nvmrc` which supports the desired angular version
-- add `jest.config.ts` as it is in the prev version: `ng-mocks/e2e/a19/jest.config.ts`
-- add `karma.conf.js` as it is in the prev version: `ng-mocks/e2e/a19/karma.conf.js`
-- add `ng-package.json` as it is in the prev version: `ng-mocks/e2e/a19/ng-package.json`
-- delete `ng-mocks/e2e/a20/public`
-- delete `ng-mocks/e2e/a20/src/app`
-- delete `ng-mocks/e2e/a20/src/style.css`
-- remove `<link rel="icon">` from `ng-mocks/e2e/a20/src/index.html`
-- change `ng-mocks/e2e/a20/src/main.ts` as it is in the prev version: `ng-mocks/e2e/a19/src/main.ts`
-- add `ng-mocks/e2e/a20/src/test.ts` as it is in the prev version: `ng-mocks/e2e/a19/src/test.ts`
-- add `ng-mocks/e2e/a20/src/setup-jest.ts` as it is in the prev version: `ng-mocks/e2e/a19/src/setup-jest.ts`
+- add `jest.config.ts` as it is in the prev version: `ng-mocks/e2e/a20/jest.config.ts`
+- add `karma.conf.js` as it is in the prev version: `ng-mocks/e2e/a20/karma.conf.js`
+- add `ng-package.json` as it is in the prev version: `ng-mocks/e2e/a20/ng-package.json`
+- delete `ng-mocks/e2e/a21/public`
+- delete `ng-mocks/e2e/a21/src/app`
+- delete `ng-mocks/e2e/a21/src/style.css`
+- remove `<link rel="icon">` from `ng-mocks/e2e/a21/src/index.html`
+- change `ng-mocks/e2e/a21/src/main.ts` as it is in the prev version: `ng-mocks/e2e/a20/src/main.ts`
+- add `ng-mocks/e2e/a21/src/test.ts` as it is in the prev version: `ng-mocks/e2e/a20/src/test.ts`
+- add `ng-mocks/e2e/a21/src/setup-jest.ts` as it is in the prev version: `ng-mocks/e2e/a20/src/setup-jest.ts`
 
 ### Step #3 - update scripts
 
-- update `ng-mocks/package.json`, search for `a19` and extended scripts to support `a20`
-- update `ng-mocks/compose.yml`, search for `a19` and copy blocks to support `a20` with the right node version
-- update `ng-mocks/compose.sh`, search for `a19` and copy blocks to support `a20` with the right command to install `puppeteer`
-- update `ng-mocks/.dockerignore`, search for `a19` and copy blocks to support `a20`
-- update `ng-mocks/.github/dependabot.yml`, search for `a19` and copy blocks to support `a20`
-- update `ng-mocks/.circleci/config.yml`, search for `a19` and copy blocks to support `a20`
-- update `ng-mocks/.eslintrc.yml`, search for `a19` and copy blocks to support `a20`
-- execute `sh compose.sh a20` in `ng-mocks` to install dependencies for `a20`, it might require `--force` at this moment in `compose.yml` in the command for the new version
+- update `ng-mocks/package.json`, search for `a20` and extended scripts to support `a21`
+- update `ng-mocks/compose.yml`, search for `a20` and copy blocks to support `a21` with the right node version
+- update `ng-mocks/compose.sh`, search for `a20` and copy blocks to support `a21` with the right command to install `puppeteer`
+- update `ng-mocks/test.sh`, search for `a20` and copy blocks to support `a21`
+- update `ng-mocks/.dockerignore`, search for `a20` and copy blocks to support `a21`
+- update `ng-mocks/.github/dependabot.yml`, search for `a20` and copy blocks to support `a21`
+- update `ng-mocks/.circleci/config.yml`, search for `a20` and copy blocks to support `a21`
+- update `ng-mocks/.eslintrc.yml`, search for `a20` and copy blocks to support `a21`
+- execute `sh compose.sh a21` in `ng-mocks` to install dependencies for `a21`, it might require `--force` at this moment in `compose.yml` in the command for the new version
 
 ### Step #4 - update ng-mocks dependencies
 
-- update `ng-mocks/package.json` to point to the new angular version in dependencies
+- update `ng-mocks/package.json` to point to the version `^21` in dependencies
 - execute `sh compose.sh root` in `ng-mocks` to install the dependencies
 
 ### Step #5 - verify that`ng-mocks` does not fail with the new version
 
-- execute `nvm install` in `ng-mocks`
-- execute `nvm use`
-- execute `npm run build`
-- execute `npm run clean:a20`
-- execute `npm run s:a20`
-- execute `npm run s:app:a20`
-- execute `npm run s:test:a20`
-- execute `npm run test:a20`
+- execute `sh test.sh root` in `ng-mocks` to ensure nothing fails
+- execute `sh test.sh a21` in `ng-mocks` to ensure nothing fails
 - tests should pass successfully without failures
 
+if tests are failing
+
+- execute `cd e2e/a21` in `ng-mocks`
+- execute `nvm install`
+- execute `nvm nvm use`
+- execute `npm run test:debug`
+
 ### Step #6 - update version references
 
 - update the version table in `ng-mocks/docs/articles/index.md`
 - update the migration guide in `docs/articles/migrations.md`
 - update the version table in `ng-mocks/README.md`
 - update `description` in `libs/ng-mocks/package.json`
 - update `peerDependencies` in `libs/ng-mocks/package.json`
-- update this file and replace `a20` with `a21`
-- update this file and replace `v20` with `v21`
-- update this file and replace `^20` with `^21`
-- update this file and replace `Angular 20` with `Angular 21`
-- update this file and replace `a19` with `a20`
+- update this file and replace `a21` with `a22`
+- update this file and replace `v21` with `v22`
+- update this file and replace `^21` with `^22`
+- update this file and replace `Angular 21` with `Angular 22`
+- update this file and replace `a20` with `a` + `21`
+- fix the previous expression manually
 
 ### Step #7 - verify
 

README.md

@@ -15,6 +15,7 @@ The current version of the library **has been tested** and **can be used** with:
 
 | angular | ng-mocks | jasmine | jest | ivy | standalone | signals | defer |
 | ------: | :------: | :-----: | :--: | :-: | :--------: | :-----: | :---: |
+|      20 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      19 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      18 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      17 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |

compose.sh

@@ -1,8 +1,6 @@
 #!/usr/bin/env bash
 set -e
 
-echo "Starting"
-
 export NVM_DIR="$HOME/.nvm" && \. "$NVM_DIR/nvm.sh"
 
 if [ "$1" = "" ] || [ "$1" = "root" ]; then
@@ -197,6 +195,16 @@ if [ "$1" = "" ] || [ "$1" = "a19" ]; then
     cd ../..
 fi
 
+if [ "$1" = "" ] || [ "$1" = "a20" ]; then
+  docker compose up --build -- a20 && \
+    docker compose run --rm a20 node ./node_modules/puppeteer/install.mjs && \
+    cd ./e2e/a20 && \
+    nvm install && \
+    nvm use && \
+    node ./node_modules/puppeteer/install.mjs && \
+    cd ../..
+fi
+
 if [ "$1" = "" ] || [ "$1" = "jasmine" ]; then
   docker compose up --build -- jasmine && \
     docker compose run --rm jasmine node ./node_modules/puppeteer/install.mjs && \

compose.yml

@@ -256,6 +256,19 @@ services:
       - install
       - --no-audit
 
+  a20:
+    image: satantime/puppeteer-node:22.14.0
+    working_dir: /app
+    volumes:
+      - ./e2e/a20:/app
+      - cache:/root/.cache
+      - gyp:/root/.node-gyp
+      - npm:/root/.npm
+    command:
+      - npm
+      - install
+      - --no-audit
+
   jasmine:
     image: satantime/puppeteer-node:20.18.3
     working_dir: /app

docs/articles/extra/install.md

@@ -106,7 +106,9 @@ The file doesn't exist, because `@angular-builders/jest` provides default config
 To restore `src/setup-jest.ts` you need to recreate this file with the next content:
 
 ```ts title="src/setup-jest.ts"
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
 ```
 
 Then, open `angular.json`, and at the `test` section of `"builder": "@angular-builders/jest:run"`, add the next option:

docs/articles/index.md

@@ -27,7 +27,8 @@ keeping interfaces as they are, but suppressing their implementation.
 The current version of `ng-mocks` has been tested and **can be used** with:
 
 | angular | ng-mocks | jasmine | jest | ivy | standalone | signals | defer |
-| ------: | :------: | :-----: | :--: | :-: | :--------: | :-----: | :---: |
+|--------:| :------: | :-----: | :--: | :-: | :--------: | :-----: | :---: |
+|      20 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      19 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      18 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |
 |      17 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |

docs/articles/migrations.md

@@ -10,6 +10,16 @@ Below you can find critical changes. They happen on major releases.
 
 If you are facing an issue, despite the instructions, please, feel free to [contact us](need-help.md).
 
+## From 19 to 20
+
+There are no special cases.
+The update should be straight forward.
+
+## From 18 to 19
+
+There are no special cases.
+The update should be straight forward.
+
 ## From 17 to 18
 
 There are no special cases.

e2e/a10/angular.json

@@ -71,5 +71,8 @@
       }
     }
   },
+  "cli": {
+    "analytics": false
+  },
   "defaultProject": "a10"
 }

e2e/a10/jest.es2015ivy.js

@@ -4,7 +4,7 @@ module.exports = {
   maxWorkers: 1,
   setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
   testURL: 'http://localhost',
-  testPathIgnorePatterns: ['<rootDir>/src/test.ts'],
+  testMatch: ['<rootDir>/src/**/*.spec.ts'],
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.es2015ivy.spec.json',

e2e/a10/jest.es2015noivy.js

@@ -4,7 +4,7 @@ module.exports = {
   maxWorkers: 1,
   setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
   testURL: 'http://localhost',
-  testPathIgnorePatterns: ['<rootDir>/src/test.ts'],
+  testMatch: ['<rootDir>/src/**/*.spec.ts'],
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.es2015noivy.spec.json',

e2e/a10/jest.es5ivy.js

@@ -4,7 +4,7 @@ module.exports = {
   maxWorkers: 1,
   setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
   testURL: 'http://localhost',
-  testPathIgnorePatterns: ['<rootDir>/src/test.ts'],
+  testMatch: ['<rootDir>/src/**/*.spec.ts'],
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.es5ivy.spec.json',