diff --git a/.github/workflows/angular-test-and-lint.yml b/.github/workflows/angular-test-and-lint.yml index 4c99858e2..10cf18392 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 @@ -37,6 +38,12 @@ jobs: 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 @@ -77,6 +84,50 @@ 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: 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/*.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' + 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: | 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"