chore: cleanup and updates

.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For format details, see https://aka.ms/devcontainer.json.
 {
   "name": "angular-testing-library",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:22-bullseye",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:24-bookworm",
 
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {

.gitignore

@@ -42,6 +42,4 @@ yarn.lock
 # System Files
 .DS_Store
 Thumbs.db
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
 .history

README.md

@@ -55,6 +55,7 @@ practices.</p>
 - [Table of Contents](#table-of-contents)
 - [The problem](#the-problem)
 - [This solution](#this-solution)
+- [Zoneless support](#zoneless-support)
 - [Example](#example)
 - [Installation](#installation)
 - [Version compatibility](#version-compatibility)
@@ -92,6 +93,20 @@ primary guiding principle is:
 > [The more your tests resemble the way your software is used, the more
 > confidence they can give you.][guiding-principle]
 
+## Zoneless support
+
+For zoneless applications, Angular Testing Library provides a dedicated slim entry point:
+
+```ts
+import { render } from '@testing-library/angular/zoneless';
+```
+
+A schematic is available to migrate existing tests:
+
+```bash
+ng generate @testing-library/angular:migrate-to-zoneless
+```
+
 ## Example
 
 counter.component.ts

angular.json

@@ -61,53 +61,17 @@
       "sourceRoot": "apps/example-app/src",
       "prefix": "app",
       "architect": {
-        "build": {
+        "test-build": {
           "builder": "@angular/build:application",
           "options": {
-            "outputPath": {
-              "base": "dist/apps/example-app"
-            },
-            "index": "apps/example-app/src/index.html",
-            "tsConfig": "apps/example-app/tsconfig.app.json",
-            "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"],
-            "styles": [],
-            "scripts": [],
-            "browser": "apps/example-app/src/main.ts"
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "example-app:build:production"
-            },
-            "development": {
-              "buildTarget": "example-app:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
+            "polyfills": [],
+            "tsConfig": "apps/example-app/tsconfig.spec.json"
+          }
         },
         "test": {
           "builder": "@angular/build:unit-test",
           "options": {
+            "buildTarget": "example-app:test-build",
             "setupFiles": ["apps/example-app/test-setup.ts"]
           }
         },
@@ -125,50 +89,6 @@
       "sourceRoot": "apps/example-app-jest/src",
       "prefix": "app",
       "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "outputPath": {
-              "base": "dist/apps/example-app-jest"
-            },
-            "index": "apps/example-app-jest/src/index.html",
-            "tsConfig": "apps/example-app-jest/tsconfig.app.json",
-            "assets": ["apps/example-app-jest/src/favicon.ico", "apps/example-app-jest/src/assets"],
-            "styles": [],
-            "scripts": [],
-            "browser": "apps/example-app-jest/src/main.ts"
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "example-app-jest:build:production"
-            },
-            "development": {
-              "buildTarget": "example-app-jest:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
         "test": {
           "builder": "@angular-builders/jest:run",
           "options": {
@@ -189,50 +109,6 @@
       "sourceRoot": "apps/example-app-karma/src",
       "prefix": "app",
       "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "outputPath": {
-              "base": "dist/apps/example-app-karma"
-            },
-            "index": "apps/example-app-karma/src/index.html",
-            "tsConfig": "apps/example-app-karma/tsconfig.app.json",
-            "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
-            "styles": [],
-            "scripts": [],
-            "browser": "apps/example-app-karma/src/main.ts"
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "example-app-karma:build:production"
-            },
-            "development": {
-              "buildTarget": "example-app-karma:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
         "test": {
           "builder": "@angular/build:karma",
           "options": {

apps/example-app-jest/src/app/examples/21-deferable-view.component.ts

@@ -10,13 +10,13 @@ export class DeferableViewChildComponent {}
 @Component({
   template: `
     @defer (on timer(2s)) {
-        <atl-deferable-view-child />
+      <atl-deferable-view-child />
     } @placeholder {
-        <p>Hello from placeholder</p>
+      <p>Hello from placeholder</p>
     } @loading {
-        <p>Hello from loading</p>
+      <p>Hello from loading</p>
     } @error {
-        <p>Hello from error</p>
+      <p>Hello from error</p>
     }
   `,
   imports: [DeferableViewChildComponent],

apps/example-app-jest/tsconfig.json

@@ -15,9 +15,6 @@
     "strictTemplates": true
   },
   "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
     {
       "path": "./tsconfig.spec.json"
     }

apps/example-app-karma/karma.conf.js

@@ -4,7 +4,7 @@ module.exports = function (config) {
   try {
     config.set({
       basePath: '',
-      frameworks: ['jasmine', '@angular-devkit/build-angular'],
+      frameworks: ['jasmine'],
       plugins: [require('karma-jasmine'), require('karma-chrome-launcher')],
       client: {
         jasmine: {

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -37,11 +37,11 @@ it('should display invalid message and submit button must be disabled', async ()
     <form [formGroup]="form" (submit)="onSubmit(form)">
       <input type="email" aria-label="email" formControlName="email" />
       @if (email.invalid && (email.dirty || email.touched)) {
-      <div role="alert">Email is invalid</div>
+        <div role="alert">Email is invalid</div>
       }
       <input type="password" aria-label="password" formControlName="password" />
       @if (password.invalid && (password.dirty || password.touched)) {
-      <div role="alert">Password is invalid</div>
+        <div role="alert">Password is invalid</div>
       }
       <button type="submit" aria-label="submit" [disabled]="form.invalid">Submit</button>
     </form>

apps/example-app-karma/tsconfig.json

@@ -14,9 +14,6 @@
     "strictTemplates": true
   },
   "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
     {
       "path": "./tsconfig.spec.json"
     }

apps/example-app/src/app/examples/21-deferable-view.component.ts

@@ -10,13 +10,13 @@ export class DeferableViewChildComponent {}
 @Component({
   template: `
     @defer (on timer(2s)) {
-        <atl-deferable-view-child />
+      <atl-deferable-view-child />
     } @placeholder {
-        <p>Hello from placeholder</p>
+      <p>Hello from placeholder</p>
     } @loading {
-        <p>Hello from loading</p>
+      <p>Hello from loading</p>
     } @error {
-        <p>Hello from error</p>
+      <p>Hello from error</p>
     }
   `,
   imports: [DeferableViewChildComponent],

apps/example-app/tsconfig.json

@@ -15,9 +15,6 @@
     "strictTemplates": true
   },
   "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
     {
       "path": "./tsconfig.spec.json"
     }