[mfranzke]

Proposed changes

This PR is about updating Angular to version 22. As aligned, we won't update the packages in the storybook part, as those still have Angular version < 22 as a peerDependency. And output/angular, as this would be compatible with both the current, and the LTS version; we won't go back to version 20, even though that this would be the actual lowest LTS version.

Angular storybook and output/angular now have:

• Angular 21 pinned directly
• added Angular version >=21.0.0 as a peerDependency to our Angular package
  • Angular 21 consumers cannot use a library built with Angular 22. Even though the source code only uses APIs available since Angular 17, the partial compilation output from ng-packagr 22 uses Angular 22's compiler output format. The linker in Angular 21 may not understand declarations emitted by Angular 22's compiler.
  • The peerDependencies I added are correct — they make this constraint explicit. The library is built with Angular 22, so it requires @angular/core ^22.0.0.
  • This is a standard practice in the Angular ecosystem. When you bump your library's build toolchain to a new Angular major, you are making a breaking change for consumers on older versions. That's why this should be a major version bump of the library itself (or at minimum documented as requiring Angular 22+).
• TypeScript 5.9.3 pinned explicitly
• No @db-ux/ngx-core-components workspace dependency (which would pull in Angular 22 transitive deps)
• Components are still accessible via the @components tsconfig path alias pointing to ../../output/angular/src
• Fixed a problem on mixed up dependencies
  • Root cause: The Angular storybook's @components path alias points to ../../output/angular/src. When webpack resolves import { ... } from "@angular/core" within those source files, it walks up the directory tree and finds output/angular/node_modules/@angular/core@22.0.2 before reaching the storybook's own node_modules/@angular/core@21.2.17. This caused Angular 21's babel loader to process Angular 22 code containing the new ɵɵFactoryTarget.Service enum value it doesn't understand.
  • Fix: Added webpackFinal to the Storybook config that prepends the storybook's own node_modules directory to webpack's resolve.modules array. This ensures all @angular/* imports resolve to Angular 21 regardless of where the importing source file lives on disk.

Plus needed to adapt the following:

• TS5011: When all source files are in ./src, TypeScript requires you to explicitly set rootDir to match.
• TS5107: moduleResolution: "node" (which resolves to node10) is deprecated and will stop working in TS 7.0.
• Removed deprecated option 'downlevelIteration'
• As moduleResolution is bundler now, allowSyntheticDefaultImports is true by default

Overview of Angular and TS versions

Workspace	Angular	TypeScript	Purpose
output/angular	21.2.17	5.9.3	Published library — built with lowest supported version for max compatibility
showcases/angular-showcase	22.0.2	6.0.3	Proves the library works on Angular 22
showcases/angular-ssr-showcase	22.0.2	6.0.3	Proves SSR works on Angular 22
storybooks/angular-storybook	21.2.17	5.9.3	Storybook (constrained by @storybook/angular peer deps)

resolves #7067

Checklist

Code Quality

• I have reviewed my own code (self-review), including the screen- and snapshots
• I have reviewed my changes locally with an AI assistant (e.g. GitHub Copilot, Kiro, etc.)
• No hardcoded values, magic numbers, or debug code left in

Validation

• I have added/updated tests that cover my changes
• I have tested across all relevant frameworks (React, Angular, Vue) if applicable

General

• The PR title follows the conventional commits format (e.g. feat:, fix:, chore:), as in Git Commit Conventions
• If architecture, structure, or conventions changed inside a packages/* folder, the corresponding AGENTS.md has been updated

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/refactor-updated-to-angular-22

[changeset-bot]

⚠️ No Changeset found

Latest commit: dd73af5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[mfranzke]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 44053af9b5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[mfranzke]

storybook prevents this update at the moment, @storybook/angular still has Angular < version 22 as a peerDependency.

[mfranzke]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 23a0e2edc7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[mfranzke]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 77068e7f1b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[mfranzke]

storybook just merged their PR and release a beta version that we could try to use.

[mfranzke]

Angular will be updated in storybook by the other PR #7317

[nmerget]

The peerDependencies I added are correct — they make this constraint explicit. The library is built with Angular 22, so it requires @angular/core ^22.0.0.

lol, the PR description is wrong. But this description sounds very AI generated is this realy the case, that an Angular v22 cannot be used in an Angular v21 project?

[mfranzke]

@d-koppenhagen that question is for you.

[d-koppenhagen]

I think I've read somewhere it works now with Angular 22. You should just check it out.
At least in my personal website project on GH I am on Angular 22 with Storybook and it works (but probably the setup is slightly different).

[mfranzke]

I think I've read somewhere it works now with Angular 22. You should just check it out. At least in my personal website project on GH I am on Angular 22 with Storybook and it works (but probably the setup is slightly different).

@d-koppenhagen thanks a lot. There might be a misunderstanding:
This question is not about whether Storybook has Angular 22 (it now does with a delay), but whether projects with up to two major versions behind the one with which components are build should still work (like in this case, could an Angular 21 project handle components that we've build with Angular 22?).

[d-koppenhagen]

Found the authoritative source: Angulars guide, "Ensuring library version compatibility": https://angular.dev/tools/libraries/creating-libraries#ensuring-library-version-compatibility

The Angular version used to build an application should always be the same or greater than the Angular versions used to build any of its dependent libraries. […] Angular does not support using an earlier version for the application.

So the finding is correct: a library built with Angular 22 requires consuming apps to be on Angular 22 or later — an Angular 21 project can't use it. Which makes it a policy call: if we want to keep ≤21 consumers working, we'd need to build core-web against the lowest major we want to support.

But I am unsure if the qute above is more like a rule which should be followed or a real thing which is clocked by the compiler. I think it was in the past when Angular made the switch to the new ivy compiler but in this case all versions already rely on the new compiler. Probably it is something we have to try out.

[mfranzke]

because of that latest finding, this is a bigger topic. We'll close this for now and need to further investigate.