From c360929f4694afe5a3c6f7397883d90a5d45a13d Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 08:49:48 +0200 Subject: [PATCH 1/6] chore: add angular v21 support #352 updated readme with angular version support info --- .github/workflows/angular-release.yml | 19 ++++++++-- .github/workflows/angular-test-and-lint.yml | 39 +++++++++++++++++---- README.md | 27 +++++++++++++- package.json | 14 ++++---- 4 files changed, 82 insertions(+), 17 deletions(-) diff --git a/.github/workflows/angular-release.yml b/.github/workflows/angular-release.yml index c76cf7552..5a1354b61 100644 --- a/.github/workflows/angular-release.yml +++ b/.github/workflows/angular-release.yml @@ -25,6 +25,11 @@ jobs: test: runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + angular-version: [19, 20, 21] + name: test (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -32,10 +37,18 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Test + - name: Install dependencies + run: npm ci --cache .npm --prefer-offline + - name: Detect base Angular version + id: base + run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" + - name: Update to Angular ${{ matrix.angular-version }} + if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npm ci --cache .npm --prefer-offline - npm run test + npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force + npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + - name: Test + run: npm run test chromatic: needs: [lint, test] diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index 4c99858e2..1da5823e1 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -5,6 +5,7 @@ on: branches: - main - rc + jobs: lint: runs-on: ubuntu-latest @@ -24,6 +25,11 @@ jobs: build: runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + angular-version: [19, 20, 21] + name: build (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -33,13 +39,26 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Build library + - name: Install dependencies + run: npm ci --cache .npm --prefer-offline + - name: Detect base Angular version + id: base + run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" + - name: Update to Angular ${{ matrix.angular-version }} + if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npm ci --cache .npm --prefer-offline - npm run build + npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force + npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + - name: Build library + run: npm run build test: runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + angular-version: [19, 20, 21] + name: test (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -47,10 +66,18 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Test + - name: Install dependencies + run: npm ci --cache .npm --prefer-offline + - name: Detect base Angular version + id: base + run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" + - name: Update to Angular ${{ matrix.angular-version }} + if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npm ci --cache .npm --prefer-offline - npm run test + npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force + npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + - name: Test + run: npm run test test-coverage: runs-on: ubuntu-latest diff --git a/README.md b/README.md index 2e7b3d3ca..735d8c341 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,34 @@ To view and develop components in isolation, start Storybook for Angular: npm run start ``` +## Angular Version Support + +The library supports the three latest Angular major versions. Angular releases a new major every 6 months and deprecates versions after 18 months. See the [Angular release schedule](https://angular.dev/reference/releases) for upcoming dates. + +**Currently supported: Angular 19, 20, 21** + +CI runs build and test jobs against all supported versions using a matrix strategy. The base version (used for `npm ci`) is determined by `devDependencies` in `package.json` — the other versions are installed on top via `ng update`. + +### Adding a new Angular version + +When a new Angular major is released (e.g. v22): + +1. **`package.json`** — add `|| ^22.0.0` to every Angular peer dependency and `ngx-float-ui` +2. **`.github/workflows/angular-test-and-lint.yml`** — add `22` to the `angular-version` matrix in the `build` and `test` jobs +3. **`.github/workflows/angular-release.yml`** — add `22` to the `angular-version` matrix in the `test` job + +### Dropping a deprecated Angular version + +When an Angular major reaches end-of-life (e.g. v19): + +1. **`package.json`** — remove `^19.0.0 ||` from every Angular peer dependency and `ngx-float-ui` +2. **`.github/workflows/angular-test-and-lint.yml`** — remove `19` from the `angular-version` matrix in the `build` and `test` jobs +3. **`.github/workflows/angular-release.yml`** — remove `19` from the `angular-version` matrix in the `test` job +4. Bump `devDependencies` to the new minimum supported Angular version so the library is always built and developed against a supported release + ## Contributing -Check the [wiki](https://github.com/TEDI-Design-System/general) for component guidelines and coding standards. +Check the [wiki](https://github.com/TEDI-Design-System/general) for component guidelines and coding standards. Report issues or contribute via [GitHub Issues](https://github.com/TEDI-Design-System/angular/issues). --- diff --git a/package.json b/package.json index 0a5928551..c80c01b23 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,13 @@ "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build:sb --baseline-branch=rc --include=\"tedi/**/*.stories.*\"" }, "peerDependencies": { - "@angular/animations": "^19.0.0 || ^20.0.0", - "@angular/cdk": "^19.0.0 || ^20.0.0", - "@angular/common": "^19.0.0 || ^20.0.0", - "@angular/core": "^19.0.0 || ^20.0.0", - "@angular/forms": "^19.0.0 || ^20.0.0", - "@angular/platform-browser": "^19.0.0 || ^20.0.0", - "ngx-float-ui": "^19.0.1 || ^20.0.0" + "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0", + "ngx-float-ui": "^19.0.1 || ^20.0.0 || ^21.0.0" }, "dependencies": { "@tedi-design-system/core": "^3.0.1" From 91728d00b78e9c2046a4e2cde6621bd98e786e79 Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 08:54:37 +0200 Subject: [PATCH 2/6] chore: add angular v21 support #352 fixed workflow matrix build errors --- .github/workflows/angular-release.yml | 16 +++++++---- .github/workflows/angular-test-and-lint.yml | 32 +++++++++++++-------- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/.github/workflows/angular-release.yml b/.github/workflows/angular-release.yml index 5a1354b61..b200dd827 100644 --- a/.github/workflows/angular-release.yml +++ b/.github/workflows/angular-release.yml @@ -39,14 +39,18 @@ jobs: node-version: "lts/*" - name: Install dependencies run: npm ci --cache .npm --prefer-offline - - name: Detect base Angular version - id: base - run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" - name: Update to Angular ${{ matrix.angular-version }} - if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force - npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") + TARGET=${{ matrix.angular-version }} + for ((v = BASE + 1; v <= TARGET; v++)); do + echo "::group::Updating Angular $((v - 1)) -> $v" + npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + echo "::endgroup::" + done + if [ "$BASE" -ne "$TARGET" ]; then + npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force + fi - name: Test run: npm run test diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index 1da5823e1..04fc3e8f1 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -41,14 +41,18 @@ jobs: node-version: "lts/*" - name: Install dependencies run: npm ci --cache .npm --prefer-offline - - name: Detect base Angular version - id: base - run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" - name: Update to Angular ${{ matrix.angular-version }} - if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force - npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") + TARGET=${{ matrix.angular-version }} + for ((v = BASE + 1; v <= TARGET; v++)); do + echo "::group::Updating Angular $((v - 1)) -> $v" + npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + echo "::endgroup::" + done + if [ "$BASE" -ne "$TARGET" ]; then + npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force + fi - name: Build library run: npm run build @@ -68,14 +72,18 @@ jobs: node-version: "lts/*" - name: Install dependencies run: npm ci --cache .npm --prefer-offline - - name: Detect base Angular version - id: base - run: echo "version=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')")" >> "$GITHUB_OUTPUT" - name: Update to Angular ${{ matrix.angular-version }} - if: matrix.angular-version != fromJSON(steps.base.outputs.version) run: | - npx ng update @angular/core@${{ matrix.angular-version }} @angular/cli@${{ matrix.angular-version }} --allow-dirty --force - npm install @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} --force + BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") + TARGET=${{ matrix.angular-version }} + for ((v = BASE + 1; v <= TARGET; v++)); do + echo "::group::Updating Angular $((v - 1)) -> $v" + npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + echo "::endgroup::" + done + if [ "$BASE" -ne "$TARGET" ]; then + npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force + fi - name: Test run: npm run test From a24000867f75099efabe1363d26a9d41345f11fe Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 08:57:40 +0200 Subject: [PATCH 3/6] chore: add angular v21 support #352 fixed workflow matrix build errors --- .github/workflows/angular-release.yml | 3 ++- .github/workflows/angular-test-and-lint.yml | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.github/workflows/angular-release.yml b/.github/workflows/angular-release.yml index b200dd827..59125d972 100644 --- a/.github/workflows/angular-release.yml +++ b/.github/workflows/angular-release.yml @@ -45,7 +45,8 @@ jobs: TARGET=${{ matrix.angular-version }} for ((v = BASE + 1; v <= TARGET; v++)); do echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force + npm install @angular/build@$v --force echo "::endgroup::" done if [ "$BASE" -ne "$TARGET" ]; then diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index 04fc3e8f1..bf35a075f 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -47,7 +47,8 @@ jobs: TARGET=${{ matrix.angular-version }} for ((v = BASE + 1; v <= TARGET; v++)); do echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force + npm install @angular/build@$v --force echo "::endgroup::" done if [ "$BASE" -ne "$TARGET" ]; then @@ -78,7 +79,8 @@ jobs: TARGET=${{ matrix.angular-version }} for ((v = BASE + 1; v <= TARGET; v++)); do echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v @angular/build@$v --allow-dirty --force + npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force + npm install @angular/build@$v --force echo "::endgroup::" done if [ "$BASE" -ne "$TARGET" ]; then From 3b5d32851906a3d05bbd0c5f050301e8d4b11a20 Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 09:04:32 +0200 Subject: [PATCH 4/6] chore: add angular v21 support #352 workflow changes --- .github/workflows/angular-release.yml | 24 +----- .github/workflows/angular-test-and-lint.yml | 96 ++++++++++++--------- 2 files changed, 57 insertions(+), 63 deletions(-) diff --git a/.github/workflows/angular-release.yml b/.github/workflows/angular-release.yml index 59125d972..c76cf7552 100644 --- a/.github/workflows/angular-release.yml +++ b/.github/workflows/angular-release.yml @@ -25,11 +25,6 @@ jobs: test: runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - angular-version: [19, 20, 21] - name: test (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -37,23 +32,10 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Install dependencies - run: npm ci --cache .npm --prefer-offline - - name: Update to Angular ${{ matrix.angular-version }} - run: | - BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") - TARGET=${{ matrix.angular-version }} - for ((v = BASE + 1; v <= TARGET; v++)); do - echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force - npm install @angular/build@$v --force - echo "::endgroup::" - done - if [ "$BASE" -ne "$TARGET" ]; then - npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force - fi - name: Test - run: npm run test + run: | + npm ci --cache .npm --prefer-offline + npm run test chromatic: needs: [lint, test] diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index bf35a075f..66a07eb6b 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -25,11 +25,6 @@ jobs: build: runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - angular-version: [19, 20, 21] - name: build (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -39,31 +34,19 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Install dependencies - run: npm ci --cache .npm --prefer-offline - - name: Update to Angular ${{ matrix.angular-version }} - run: | - BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") - TARGET=${{ matrix.angular-version }} - for ((v = BASE + 1; v <= TARGET; v++)); do - echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force - npm install @angular/build@$v --force - echo "::endgroup::" - done - if [ "$BASE" -ne "$TARGET" ]; then - npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force - fi - name: Build library - run: npm run build + run: | + npm ci --cache .npm --prefer-offline + npm run build + - name: Upload dist + uses: actions/upload-artifact@v4 + with: + name: library-dist + path: dist/ + retention-days: 1 test: runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - angular-version: [19, 20, 21] - name: test (Angular ${{ matrix.angular-version }}) steps: - name: Checkout code uses: actions/checkout@v4 @@ -71,23 +54,10 @@ jobs: uses: actions/setup-node@v4 with: node-version: "lts/*" - - name: Install dependencies - run: npm ci --cache .npm --prefer-offline - - name: Update to Angular ${{ matrix.angular-version }} - run: | - BASE=$(node -p "require('./package.json').devDependencies['@angular/core'].replace(/[^0-9].*/,'')") - TARGET=${{ matrix.angular-version }} - for ((v = BASE + 1; v <= TARGET; v++)); do - echo "::group::Updating Angular $((v - 1)) -> $v" - npx ng update @angular/core@$v @angular/cli@$v --allow-dirty --force - npm install @angular/build@$v --force - echo "::endgroup::" - done - if [ "$BASE" -ne "$TARGET" ]; then - npm install @angular/cdk@$TARGET ngx-float-ui@$TARGET --force - fi - name: Test - run: npm run test + run: | + npm ci --cache .npm --prefer-offline + npm run test test-coverage: runs-on: ubuntu-latest @@ -114,6 +84,48 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} working-directory: ./ + compatibility: + needs: build + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + angular-version: [19, 20, 21] + name: compatibility (Angular ${{ matrix.angular-version }}) + steps: + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "lts/*" + - name: Download built library + uses: actions/download-artifact@v4 + with: + name: library-dist + path: dist/ + - name: Create test app and verify build + run: | + npx @angular/cli@${{ matrix.angular-version }} new test-app \ + --skip-git --skip-tests --style=scss --ssr=false --skip-install + cd test-app + npm install + npm install ../dist @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} + + # Import a component to verify the library is consumable + cat > src/app/app.component.ts << 'EOF' + import { Component } from '@angular/core'; + import { ButtonComponent } from '@tedi-design-system/angular/tedi'; + + @Component({ + selector: 'app-root', + standalone: true, + imports: [ButtonComponent], + template: '', + }) + export class AppComponent {} + EOF + + npx ng build + chromatic: runs-on: ubuntu-latest if: | From a96f16c67063cdb295dae721a26ff958e1fc29e8 Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 09:08:56 +0200 Subject: [PATCH 5/6] chore: add angular v21 support #352 workflow changes --- .github/workflows/angular-test-and-lint.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index 66a07eb6b..df362840e 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -102,13 +102,15 @@ jobs: with: name: library-dist path: dist/ + - name: Pack library tarball + run: cd dist && npm pack - name: Create test app and verify build run: | npx @angular/cli@${{ matrix.angular-version }} new test-app \ --skip-git --skip-tests --style=scss --ssr=false --skip-install cd test-app npm install - npm install ../dist @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} + npm install ../dist/*.tgz @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} # Import a component to verify the library is consumable cat > src/app/app.component.ts << 'EOF' From 93c7a9aff6d6ca5e0f5e5cbdac7c97c006d7a637 Mon Sep 17 00:00:00 2001 From: m2rt Date: Thu, 12 Mar 2026 09:14:22 +0200 Subject: [PATCH 6/6] chore: add angular v21 support #352 workflow changes --- .github/workflows/angular-test-and-lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index df362840e..10cf18392 100644 --- a/.github/workflows/angular-test-and-lint.yml +++ b/.github/workflows/angular-test-and-lint.yml @@ -110,7 +110,7 @@ jobs: --skip-git --skip-tests --style=scss --ssr=false --skip-install cd test-app npm install - npm install ../dist/*.tgz @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} + npm install ../dist/*.tgz @angular/animations@${{ matrix.angular-version }} @angular/forms@${{ matrix.angular-version }} @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }} # Import a component to verify the library is consumable cat > src/app/app.component.ts << 'EOF'