Angular 21 Upgrade & Playwright Support

.gitignore

@@ -49,3 +49,11 @@ testem.log
 Thumbs.db
 
 *storybook.log
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.ts

@@ -4,9 +4,8 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-onboarding',
-    '@storybook/addon-essentials',
     '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
+    '@storybook/addon-docs'
   ],
   framework: {
     name: '@storybook/angular',

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Wilfried Lucha
+Copyright (c) 2026 Wilfried Lucha
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -9,10 +9,10 @@ This project is more than just a boilerplate – it's a **production-ready found
 
 ## Features 🛠️
 
-✅ **Latest Angular 20** – Stay up-to-date with the newest Angular features.  
+✅ **Latest Angular 21** – Stay up-to-date with the newest Angular features.  
 ✅ **Angular Material** – Build beautiful, responsive UIs with Material Design.  
 ✅ **Unit Testing with Jest** – Fast and reliable testing for your components.  
-✅ **End-to-End Testing with Cypress** – Ensure your app works flawlessly from start to finish.  
+✅ **End-to-End Testing with Playwright** – Ensure your app works flawlessly from start to finish.  
 ✅ **Internationalization with Transloco** – Easily support multiple languages.  
 ✅ **Auto Documentation with Compodoc** – Keep your codebase well-documented.  
 ✅ **Component Examples with Storybook** – Showcase and test your components in isolation.  

angular.json

@@ -25,7 +25,10 @@
               "src/polyfills.ts"
             ],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
@@ -87,52 +90,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        },
-        "cypress-run": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "angular-starter:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-starter:serve:production"
-            }
-          }
-        },
-        "cypress-open": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "watch": true,
-            "headless": false
-          }
-        },
-        "ct": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "angular-starter:serve",
-            "watch": true,
-            "headless": false,
-            "testingType": "component"
-          },
-          "configurations": {
-            "development": {
-              "devServerTarget": "angular-starter:serve:development"
-            }
-          }
-        },
-        "e2e": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "angular-starter:serve",
-            "watch": true,
-            "headless": false
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-starter:serve:production"
-            }
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         },
         "storybook": {
@@ -141,7 +102,12 @@
             "configDir": ".storybook",
             "browserTarget": "angular-starter:build",
             "compodoc": true,
-            "compodocArgs": ["-e", "json", "-d", "."],
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
             "port": 6006
           }
         },
@@ -151,15 +117,22 @@
             "configDir": ".storybook",
             "browserTarget": "angular-starter:build",
             "compodoc": true,
-            "compodocArgs": ["-e", "json", "-d", "."],
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
             "outputDir": "storybook-static"
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": ["@cypress/schematic", "@schematics/angular"]
+    "schematicCollections": [
+      "@schematics/angular"
+    ]
   },
   "schematics": {
     "@schematics/angular:component": {
@@ -187,4 +160,4 @@
       "typeSeparator": "."
     }
   }
-}
+}

app.json

@@ -1,6 +1,11 @@
 {
-  "name": "Angular 18 Starter",
-  "description": "Angular 18 Starter project with Material, Transloco, Jest & Compodoc",
+  "name": "Angular 21 Starter",
+  "description": "Angular 21 Starter project with Material, Transloco, Jest & Compodoc",
   "repository": "https://github.com/wlucha/angular-starter",
-  "keywords": ["angular", "jest", "compodoc", "transloco"]
-}
+  "keywords": [
+    "angular",
+    "jest",
+    "compodoc",
+    "transloco"
+  ]
+}

jest.config.ts

@@ -3,6 +3,17 @@ import type { Config } from 'jest';
 const jestConfig: Config = {
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testPathIgnorePatterns: ['/node_modules/', '/tests/'],
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|@jsverse)'],
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
 };
 
 export default jestConfig;