feat: update to angular v21

[Avcharov]

Closes: #552

---

Changes by Nx Migrations (automatic)

Change	Migration	Reason
module: "preserve", moduleResolution: "bundler"	update-module-resolution-22-2-0	Aligns with esbuild/Vite build system
lib: ["dom", "es2022"]	update-typescript-lib-22-2-0	Enables ES2022 features
isolatedModules: true in tsconfig.spec.json	set-isolated-modules-22-3-0	Required by modern bundlers
tsConfig in project.json	set-tsconfig-option	Explicit path for reliability
BootstrapContext in main.server.ts	add-bootstrap-context-to-server-main	Angular 21 SSR requirement

---

Changes by Storybook 10 Migration (automatic)

Change	Reason
module.exports → export default	Storybook 10 requires ESM
addon-essentials → addon-docs	Essential features now in core
Added docs: { autodocs: true }	New autodocs config format

---

Manual Changes for Storybook 10

Change	Reason
type: "module" in library package.json	Avoids ESM warnings
jsx: "react", skipLibCheck: true in .storybook/tsconfig.json	Fixes MDX/JSX compilation errors
declarations → imports in stories	Angular 20+ components are standalone by default
Removed @storybook/core-server	Incompatible with Storybook 10

---

Manual Changes for Angular 21

Change	Reason
Peer dependencies → ^21.1.0	Library requires Angular 21+

---

Summary by CodeRabbit

• Chores
  • Upgraded Angular framework and dependencies from version 20 to 21.1.2 for improved compatibility and stability.
  • Updated build tooling, development dependencies, and project configurations to align with Angular 21 ecosystem standards.
  • Enhanced Storybook setup and TypeScript compilation configuration.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2475e92

Command	Status	Duration	Result
nx run-many --target=build --all	✅ Succeeded	11s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-02-03 11:16:02 UTC

[santoshyadavdev]

@CodeRabbit review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR migrates the project from Angular 20 to Angular 21, updating core dependencies, build toolchain versions, and configuration files to align with the new Angular ecosystem while adjusting Storybook configuration and story definitions to match updated patterns.

Changes

Cohort / File(s)	Summary
Dependency Version Updates package.json	Bumps Angular packages from 20.1.3 to 21.1.2, NX from 21.3.x to 22.4.4, TypeScript to 5.9.3, Storybook to 10.2.4, zone.js to 0.16.0, and related tooling packages; adds @storybook/addon-docs.
TypeScript Configuration apps/ngu-carousel-example/tsconfig.json, apps/ngu-carousel-example/tsconfig.spec.json, libs/ngu/carousel/tsconfig.json, libs/ngu/carousel/tsconfig.spec.json, libs/ngu/carousel/.storybook/tsconfig.json	Adds compiler options: module set to "preserve", moduleResolution to "bundler", lib to ["dom", "es2022"], jsx to "react", esModuleInterop and isolatedModules set to true; adjusts per-file transpilation and module resolution behavior.
Storybook Configuration libs/ngu/carousel/.storybook/main.js	Switches from CommonJS to ES module export, updates stories glob pattern to target ../src/**/*.stories.*, and changes addons from addon-essentials to addon-docs.
Build System Configuration libs/ngu/carousel/project.json, libs/ngu/carousel/package.json	Adds "type": "module" to package.json, updates Angular peer dependencies to ^21.1.0, moves tsConfig to build.options, and changes karma config path to .cjs extension.
Story Definitions libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.stories.ts, libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.stories.ts	Refactors stories from inline Meta exports to strongly-typed meta constants with moduleMetadata decorators; introduces Story type aliases and updates story titles to nested paths.
Application Bootstrap apps/ngu-carousel-example/src/main.server.ts	Updates bootstrap function signature to accept BootstrapContext parameter and pass it to bootstrapApplication for server-side rendering compatibility.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Angular twenty's days have passed away,
Version twenty-one now leads the way!
With bundler resolve and module care,
Storybook tales get styled to share.
Migration complete, our carousel spins bright! 🎠

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: update to angular v21' clearly and concisely summarizes the main change, which is upgrading Angular dependencies to version 21 across the codebase.
Linked Issues check	✅ Passed	The PR successfully addresses issue #552 by updating Angular peer dependencies to ^21.1.0 and migrating code/configuration to be Angular 21 compatible.
Out of Scope Changes check	✅ Passed	All changes are directly related to the Angular 21 migration objective; changes to Storybook, TypeScript config, and build tooling are necessary dependencies of the Angular 21 upgrade.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Failure to add the new IP will result in interrupted reviews.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[santoshyadavdev]

Thank you @Avcharov

[santoshyadavdev]

Thanks for the PR