feat: update to Angular 20

BREAKING CHANGE:

The angular minimum version has changed.

BEFORE:

Angular 17,18,19 were supported.

AFTER:

Angular 20 is supported:
  - TestBed.get is removed

Author: timdeschryver

.gitignore

@@ -46,3 +46,4 @@ yarn.lock
 Thumbs.db
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+.history

apps/example-app-karma/src/app/issues/issue-491.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 it('test click event with router.navigate', async () => {
@@ -31,8 +31,6 @@ it('test click event with router.navigate', async () => {
 
   await user.click(screen.getByRole('button', { name: 'submit' }));
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('heading', { name: 'Login' }));
-
   expect(await screen.findByRole('heading', { name: 'Logged In' })).toBeVisible();
 });
 

package.json

@@ -27,15 +27,15 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "19.2.14",
-    "@angular/cdk": "19.2.18",
-    "@angular/common": "19.2.14",
-    "@angular/compiler": "19.2.14",
-    "@angular/core": "19.2.14",
-    "@angular/material": "19.2.18",
-    "@angular/platform-browser": "19.2.14",
-    "@angular/platform-browser-dynamic": "19.2.14",
-    "@angular/router": "19.2.14",
+    "@angular/animations": "20.0.0",
+    "@angular/cdk": "20.0.0",
+    "@angular/common": "20.0.0",
+    "@angular/compiler": "20.0.0",
+    "@angular/core": "20.0.0",
+    "@angular/material": "20.0.0",
+    "@angular/platform-browser": "20.0.0",
+    "@angular/platform-browser-dynamic": "20.0.0",
+    "@angular/router": "20.0.0",
     "@ngrx/store": "19.0.0",
     "@nx/angular": "21.1.2",
     "@testing-library/dom": "^10.4.0",
@@ -44,26 +44,26 @@
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.9",
-    "@angular-devkit/core": "19.2.9",
-    "@angular-devkit/schematics": "19.2.9",
+    "@angular-devkit/build-angular": "20.0.0",
+    "@angular-devkit/core": "20.0.0",
+    "@angular-devkit/schematics": "20.0.0",
     "@angular-eslint/builder": "19.2.0",
     "@angular-eslint/eslint-plugin": "19.2.0",
     "@angular-eslint/eslint-plugin-template": "19.2.0",
     "@angular-eslint/schematics": "19.2.0",
     "@angular-eslint/template-parser": "19.2.0",
-    "@angular/cli": "~19.2.0",
-    "@angular/compiler-cli": "19.2.14",
-    "@angular/forms": "19.2.14",
-    "@angular/language-service": "19.2.14",
+    "@angular/cli": "~20.0.0",
+    "@angular/compiler-cli": "20.0.0",
+    "@angular/forms": "20.0.0",
+    "@angular/language-service": "20.0.0",
     "@eslint/eslintrc": "^2.1.1",
     "@nx/eslint": "21.1.2",
     "@nx/eslint-plugin": "21.1.2",
     "@nx/jest": "21.1.2",
     "@nx/node": "21.1.2",
     "@nx/plugin": "21.1.2",
     "@nx/workspace": "21.1.2",
-    "@schematics/angular": "19.2.9",
+    "@schematics/angular": "20.0.0",
     "@testing-library/jasmine-dom": "^1.3.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
@@ -91,7 +91,7 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^15.3.0",
     "ng-mocks": "^14.13.1",
-    "ng-packagr": "19.2.2",
+    "ng-packagr": "20.0.0",
     "nx": "21.1.2",
     "postcss": "^8.4.49",
     "postcss-import": "14.1.0",
@@ -102,7 +102,7 @@
     "semantic-release": "^24.2.1",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.7.3",
+    "typescript": "5.8.2",
     "typescript-eslint": "^8.19.0"
   }
 }

projects/testing-library/package.json

@@ -29,11 +29,11 @@
     "migrations": "./schematics/migrations/migrations.json"
   },
   "peerDependencies": {
-    "@angular/animations": ">= 17.0.0",
-    "@angular/common": ">= 17.0.0",
-    "@angular/platform-browser": ">= 17.0.0",
-    "@angular/router": ">= 17.0.0",
-    "@angular/core": ">= 17.0.0",
+    "@angular/animations": ">= 20.0.0",
+    "@angular/common": ">= 20.0.0",
+    "@angular/platform-browser": ">= 20.0.0",
+    "@angular/router": ">= 20.0.0",
+    "@angular/core": ">= 20.0.0",
     "@testing-library/dom": "^10.0.0"
   },
   "dependencies": {

projects/testing-library/src/lib/testing-library.ts

@@ -40,7 +40,6 @@ import {
 type SubscribedOutput<T> = readonly [key: keyof T, callback: (v: any) => void, subscription: OutputRefSubscription];
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
-const safeInject = TestBed.inject || TestBed.get;
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -126,8 +125,8 @@ export async function render<SutType, WrapperType = SutType>(
 
   const componentContainer = createComponentFixture(sut, wrapper);
 
-  const zone = safeInject(NgZone);
-  const router = safeInject(Router);
+  const zone = TestBed.inject(NgZone);
+  const router = TestBed.inject(Router);
   const _navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
     const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
     const [path, params] = (basePath + href).split('?');
@@ -338,7 +337,7 @@ export async function render<SutType, WrapperType = SutType>(
 
 async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
   /* Make sure angular application is initialized before creating component */
-  await safeInject(ApplicationInitStatus).donePromise;
+  await TestBed.inject(ApplicationInitStatus).donePromise;
   return TestBed.createComponent(component);
 }
 

projects/testing-library/tests/defer-blocks.spec.ts

@@ -33,7 +33,6 @@ test('renders a defer block in different states using DeferBlockBehavior.Playthr
     deferBlockBehavior: DeferBlockBehavior.Playthrough,
   });
 
-  expect(await screen.findByText(/loading/i)).toBeInTheDocument();
   expect(await screen.findByText(/Defer block content/i)).toBeInTheDocument();
 });