ngxs · markwhitfeld · Dec 17, 2025 · Dec 7, 2025 · Dec 17, 2025 · Dec 17, 2025
@@ -139,18 +139,18 @@ jobs:
           name: Run integration tests for the SSR build application
           command: yarn test:ci:integration:ssr
 
-  integration_ng20_tests:
+  integration_ng21_tests:
     <<: *job_defaults
     steps:
       - *attach_workspace
       - browser-tools/install-browser-tools
       - run:
-          name: Run integration tests for ng20 application
-          command: yarn integration:ng20
+          name: Run integration tests for ng21 application
+          command: yarn integration:ng21
       - persist_to_workspace:
           root: ~/workspace
           paths:
-            - app/integrations/hello-world-ng20/dist-integration
+            - app/integrations/hello-world-ng21/dist-integration
 
   integration_test_types:
     <<: *job_defaults
@@ -216,7 +216,7 @@ workflows:
       ###     requires:
       ###       - build
 
-      - integration_ng20_tests:
+      - integration_ng21_tests:
           requires:
             - build
 

@@ -54,7 +54,7 @@ runs:
           ~/.cache
           ./node_modules
           ./@ngxs
-          ./integrations/hello-world-ng20/dist-integration
+          ./integrations/hello-world-ng21/dist-integration
         key: ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-${{ inputs.github-sha }}
         restore-keys: |
           ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-

@@ -7,11 +7,11 @@
 # - ./.github/actions/upload-integration-test-artifact
 
 name: upload-integration-test-artifact
-description: Upload an integration test artifact with a name such as 'hello-world-ng20'.
+description: Upload an integration test artifact with a name such as 'hello-world-ng21'.
 
 inputs:
   script:
-    description: A script with a name such as 'integration:ng20' that generates an integration test artifact.
+    description: A script with a name such as 'integration:ng21' that generates an integration test artifact.
     required: true
 
 runs:
@@ -21,7 +21,7 @@ runs:
       id: artifact-name
       shell: bash
       run: |
-        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng20"
+        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng21"
         echo "value=$(echo ${SCRIPT} | sed -r "s/:/-/g" | sed -r "s/integration/hello-world/g")" >> $GITHUB_OUTPUT
       env:
         SCRIPT: ${{ inputs.script }}

@@ -92,7 +92,7 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng20'
+          - 'integration:ng21'
           - 'test:types'
 
     steps:

@@ -81,7 +81,7 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng20'
+          - 'integration:ng21'
           - 'test:types'
 
     steps:

@@ -81,7 +81,7 @@ jobs:
     strategy:
       matrix:
         script:
-          - 'integration:ng20'
+          - 'integration:ng21'
           - 'test:types'
 
     steps:

@@ -1,13 +1,40 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "cli": {
+    "packageManager": "yarn"
+  },
   "newProjectRoot": "projects",
   "projects": {
-    "hello-world-ng20": {
+    "hello-world-ng21": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
         }
       },
       "root": "",
@@ -59,28 +86,18 @@
           "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "hello-world-ng20:build:production"
+              "buildTarget": "hello-world-ng21:build:production"
             },
             "development": {
-              "buildTarget": "hello-world-ng20:build:development"
+              "buildTarget": "hello-world-ng21:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"]
+            "runnerConfig": "vitest.config.ts"
           }
         }
       }

@@ -5,7 +5,7 @@ describe('Index page', () => {
     // Arrange & act & assert
     // Expect that the running applicaiton was compiled
     // with the necessary Angular version!
-    cy.get('app-root').invoke('attr', 'ng-version').should('have.string', '20');
+    cy.get('app-root').invoke('attr', 'ng-version').should('have.string', '21');
   });
 
   it('should click on the button and increase the counter', () => {

@@ -1,5 +1,5 @@
 {
-  "name": "hello-world-ng20",
+  "name": "hello-world-ng21",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -8,9 +8,9 @@
     "build": "ng build",
     "build:prod": "ng build --configuration production",
     "test": "ng test",
-    "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --source-map=false",
+    "test:ci": "ng test --no-watch --coverage",
     "test:integration": "yarn install:ci && yarn test:ci && yarn build:prod && yarn e2e:ci",
-    "preinstall": "yarn --cwd ../../ cpx -v -C \"@ngxs/**/*\" integrations/hello-world-ng20/node_modules/@ngxs",
+    "preinstall": "yarn --cwd ../../ cpx -v -C \"@ngxs/**/*\" integrations/hello-world-ng21/node_modules/@ngxs",
     "install:ci": "yarn --frozen-lockfile --non-interactive --no-progress",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
@@ -20,12 +20,12 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/router": "^20.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "@ngxs/devtools-plugin": "file:./node_modules/@ngxs/devtools-plugin",
     "@ngxs/form-plugin": "file:./node_modules/@ngxs/form-plugin",
     "@ngxs/logger-plugin": "file:./node_modules/@ngxs/logger-plugin",
@@ -37,21 +37,16 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.1",
-    "@angular/cli": "^20.0.1",
-    "@angular/compiler-cli": "^20.0.0",
-    "@types/express": "^5.0.1",
-    "@types/jasmine": "~5.1.0",
+    "@angular/build": "^21.0.2",
+    "@angular/cli": "^21.0.2",
+    "@angular/compiler-cli": "^21.0.0",
     "@types/node": "^20.17.19",
-    "jasmine-core": "~5.7.0",
     "cypress": "file:../../node_modules/cypress",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "@vitest/coverage-v8": "^4.0.15",
+    "jsdom": "^27.1.0",
     "serve": "file:../../node_modules/serve",
     "start-server-and-test": "file:../../node_modules/start-server-and-test",
-    "typescript": "~5.8.2"
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
 }
@@ -1,4 +1,4 @@
-<h1>Angular 20 Integration Test</h1>
+<h1>Angular 21 Integration Test</h1>
 
 <button (click)="increment()">Increment</button>
 <p>Counter is {{ counter() }}</p>
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { TestBed } from '@angular/core/testing';
 
 import { App } from './app';
@@ -25,6 +26,6 @@ describe('App', () => {
     const { fixture } = setup();
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Angular 20 Integration Test');
+    expect(compiled.querySelector('h1').textContent).toContain('Angular 21 Integration Test');
   });
 });
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { Component, Injectable, NgModule } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { NgxsModule, provideStore, State } from '@ngxs/store';

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>HelloWorldNg21</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(App, appConfig);
@@ -4,14 +4,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
@@ -19,7 +19,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "typeCheckHostBindings": true,
     "strictTemplates": true
   },
   "files": [],

@@ -4,11 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["vitest"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }