chore(release): update to angular 21 #149
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughServer bootstrap now accepts a Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
MGREMY
force-pushed
the
chore/angular_21
branch
from
69fd84c to
d1071a8
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
apps/docs/src/main.server.ts(1 hunks)apps/docs/src/main.ts(1 hunks)apps/docs/tsconfig.json(1 hunks)apps/storybook/.storybook/main.ts(2 hunks)libs/flowbite-angular/package.json(1 hunks)libs/flowbite-angular/project.json(1 hunks)libs/flowbite-angular/tsconfig.json(1 hunks)libs/tools/package.json(1 hunks)nx.json(1 hunks)package.json(2 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 79
File: libs/flowbite-angular/README.md:87-92
Timestamp: 2024-11-15T08:18:09.828Z
Learning: In `libs/flowbite-angular/README.md`, components that are not yet built should retain their old documentation links and construction emojis until they are completed.
📚 Learning: 2024-11-15T08:18:09.828Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 79
File: libs/flowbite-angular/README.md:87-92
Timestamp: 2024-11-15T08:18:09.828Z
Learning: In `libs/flowbite-angular/README.md`, components that are not yet built should retain their old documentation links and construction emojis until they are completed.
Applied to files:
libs/flowbite-angular/package.jsonlibs/flowbite-angular/project.jsonlibs/flowbite-angular/tsconfig.json
📚 Learning: 2024-12-11T09:25:50.819Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 88
File: libs/flowbite-angular/navbar/navbar.component.ts:99-99
Timestamp: 2024-12-11T09:25:50.819Z
Learning: In `libs/flowbite-angular/navbar/navbar.component.ts`, the `NavbarContentComponent` was already required because the `verify` function threw an error if `navbarContentChild` was undefined or null. Therefore, changing `contentChild` to `contentChild.required` does not introduce a breaking change.
Applied to files:
libs/flowbite-angular/package.jsonlibs/flowbite-angular/project.jsonlibs/flowbite-angular/tsconfig.json
📚 Learning: 2025-08-17T20:04:24.034Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 137
File: libs/flowbite-angular/table/src/table-body/table-body.directive.ts:1-3
Timestamp: 2025-08-17T20:04:24.034Z
Learning: In the flowbite-angular table module, the table state file is located at `libs/flowbite-angular/table/src/table/table-state.ts`, not at the root src level. Import paths like `../table/table-state` from subdirectories like table-body are correct.
Applied to files:
libs/flowbite-angular/package.jsonlibs/flowbite-angular/project.jsonlibs/flowbite-angular/tsconfig.json
📚 Learning: 2025-08-17T20:04:15.230Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 137
File: libs/flowbite-angular/table/src/table-head/table-head.directive.ts:2-2
Timestamp: 2025-08-17T20:04:15.230Z
Learning: In the flowbite-angular table component structure, the table-state.ts file is located at src/table/table-state.ts, not at src/table-state.ts. Import paths from other subdirectories like table-head should use '../table/table-state' to reference it.
Applied to files:
libs/flowbite-angular/tsconfig.json
📚 Learning: 2024-12-19T10:29:39.292Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 100
File: apps/docs/docs/components/badge/_bordered.component.ts:5-12
Timestamp: 2024-12-19T10:29:39.292Z
Learning: In Angular 19, the standalone property is the default behavior, making the explicit declaration of "standalone: true" unnecessary.
Applied to files:
libs/flowbite-angular/tsconfig.json
🧬 Code graph analysis (2)
apps/docs/src/main.server.ts (1)
apps/docs/src/app/app.config.server.ts (1)
config(11-11)
apps/docs/src/main.ts (3)
apps/docs/src/environments/environment.ts (1)
environment(5-7)apps/docs/src/environments/environment.prod.ts (1)
environment(1-3)apps/docs/src/app/app.config.ts (1)
appConfig(23-55)
🔇 Additional comments (10)
libs/flowbite-angular/project.json (2)
13-14: LGTM: Build configuration updated correctly.Adding the
tsConfigreference at the build options level alongside theprojectpath is appropriate for Nx/Angular library builds.
20-20: LGTM: Development configuration simplified.The empty development configuration will inherit from the base build options, which is a standard pattern.
apps/storybook/.storybook/main.ts (1)
1-1: LGTM: Storybook ESM migration applied correctly.The automatic migration to use
getAbsolutePathfor the framework name is consistent with the existing addon configuration pattern. This ensures proper path resolution in ESM context.Also applies to: 14-14
apps/docs/tsconfig.json (1)
22-24: LGTM: TypeScript configuration updated for Angular 21.The addition of
"module": "preserve"and"moduleResolution": "bundler"aligns with Angular 21's requirements and modern TypeScript practices. This configuration is consistent across the monorepo.nx.json (1)
108-110: The releaseTag configuration format is correct for Nx 22.x.Options previously prefixed with releaseTag* are now nested under a releaseTag object with unprefixed properties in Nx 22.x. The change from
releaseTagPattern(flat string) toreleaseTag(object withpatternproperty) is the required format for this version.libs/flowbite-angular/tsconfig.json (1)
20-22: Configuration is correct for Angular 21 library builds.The addition of
"module": "preserve"and"moduleResolution": "bundler"aligns with Angular 21 build standards and is automatically set by Nx Angular migrations. This configuration is appropriate for library builds with ng-packagr, which handles the transformation pipeline and final module format transpilation.libs/tools/package.json (1)
9-10: Verify Angular 21 compatibility before upgrading to Nx 22.3.1.Nx 22.3.1 contains beta-level Angular 21 support. The official compatibility matrix currently lists support only through Angular 20, so confirm that Angular 21 integration is production-ready in your environment. The S1ngularity supply-chain incident (August 2025) affected earlier Nx versions (21.5.0-21.8.0), not 22.3.1.
package.json (2)
59-113: Dependency versions are well-aligned and compatible.The devDependencies are appropriately versioned:
- Angular devkit packages: 21.0.4 / 0.2100.4
- Angular ESLint: 21.1.0
- Nx packages: 22.3.1 (consistent)
- Storybook: 10.1.10 (consistent)
- ng-packagr: 21.0.1 (matches Angular 21)
- TypeScript: 5.9.3 (compatible with Angular 21)
30-56: Note on zone.js inclusion: Zone.js is no longer included by default in Angular applications in v21, which suggests this dependency may not be necessary. If the application is configured for zoneless change detection (the new default), zone.js can be removed. Verify the angular.json configuration to determine whether zone.js is actually needed for your project. If your application intentionally retains zone-based change detection for backward compatibility, zone.js 0.16.0 is compatible.Also note that ng-doc packages remain at 20.1.0, which aligns with the PR description.
apps/docs/src/main.ts (1)
5-15: TheprovideZoneChangeDetection()pattern is correct for Angular 21.Angular 21 requires adding
provideZoneChangeDetectionto yourbootstrapApplicationproviders to restore Zone.js-based change detection. The code correctly spreads the existingappConfigand prepends the provider, which is the standard approach shown in Angular's migration guidance. Optional configuration parameters likeeventCoalescingare available if performance tuning is needed, but the basic usage without additional options is sufficient.
MGREMY
force-pushed
the
chore/angular_21
branch
from
d1071a8 to
9579f11
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/flowbite-angular/navbar/src/navbar-brand/navbar-brand.directive.ts (1)
10-21: Incorrecttypeattribute on anchor element.The directive selector targets
a[flowbiteNavbarBrand](anchor elements), buttype: 'button'is only semantically valid for<button>or<input>elements. On an anchor element, thetypeattribute represents the MIME type of the linked resource, not a button type.If this host binding was intended for a button variant, consider either:
- Updating the selector to include button elements
- Removing this attribute entirely for anchor elements
- Using conditional host binding based on the element type
Suggested fix: Remove the invalid type binding for anchors
@Directive({ standalone: true, selector: ` a[flowbiteNavbarBrand] `, exportAs: 'flowbiteNavbarBrand', hostDirectives: [], providers: [provideFlowbiteNavbarBrandState()], host: { '[class]': `theme().host.root`, - type: 'button', }, })
🤖 Fix all issues with AI agents
In @apps/docs/src/main.server.ts:
- Around line 4-12: The server bootstrap calls provideZoneChangeDetection() but
that symbol isn't imported, causing a ReferenceError; add the missing import for
provideZoneChangeDetection from @angular/core at the top of the file so the call
in the bootstrapApplication call (where AppComponent and config are used)
resolves correctly.
In @package.json:
- Around line 29-57: Update the root dependency "@ng-primitives/state" from
"0.78.0" to at least "0.90.0" (or a compatible semver range like "^0.90.0") to
satisfy the peerDependency declared by libs/flowbite-angular/package.json; after
changing the dependency entry for "@ng-primitives/state" run package manager
install (and update the lockfile) and run project tests/build to confirm no
regressions.
🧹 Nitpick comments (1)
apps/docs/src/main.ts (1)
12-15: Consider enablingeventCoalescingfor improved change detection performance.When using
provideZoneChangeDetection(), settingeventCoalescing: truecoalesces event-triggered change detection cycles into a single async detection, which reduces unnecessary change detection runs from event bubbling.♻️ Suggested improvement
bootstrapApplication(AppComponent, { ...appConfig, - providers: [provideZoneChangeDetection(), ...appConfig.providers], + providers: [provideZoneChangeDetection({ eventCoalescing: true }), ...appConfig.providers], }).catch((e) => console.log(e));
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/docs/src/main.server.tsapps/docs/src/main.tsapps/docs/tsconfig.jsonapps/storybook/.storybook/main.tslibs/flowbite-angular/navbar/src/navbar-brand/navbar-brand.directive.tslibs/flowbite-angular/package.jsonlibs/tools/package.jsonlibs/tools/tsconfig.jsonnx.jsonpackage.jsontsconfig.base.json
🚧 Files skipped from review as they are similar to previous changes (3)
- libs/flowbite-angular/package.json
- nx.json
- apps/docs/tsconfig.json
🧰 Additional context used
🧬 Code graph analysis (2)
apps/docs/src/main.server.ts (1)
apps/docs/src/app/app.config.server.ts (1)
config(11-11)
apps/docs/src/main.ts (3)
apps/docs/src/environments/environment.prod.ts (1)
environment(1-3)apps/docs/src/environments/environment.ts (1)
environment(5-7)apps/docs/src/app/app.config.ts (1)
appConfig(23-55)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build code 🛠 (20)
🔇 Additional comments (5)
apps/storybook/.storybook/main.ts (2)
1-1: LGTM! Auto-migration comment for ESM compatibility.The comment documents that this file was automatically migrated to ESM format, which is helpful for maintainability.
13-16: LGTM! Framework path resolution updated for ESM compatibility.Using
getAbsolutePath('@storybook/angular')instead of a string literal is the correct approach for Storybook 10.x with ESM modules. This ensures proper resolution in monorepo setups and avoids path issues.libs/tools/package.json (1)
9-11: LGTM! Nx tooling dependencies updated consistently.The Nx packages are updated to 22.3.3, which provides official Angular 21 support. Both
@nx/angularand@nx/devkitare pinned to the same version, preventing version mismatches. The tslib upgrade to ^2.8.1 is appropriate.tsconfig.base.json (1)
7-7: LGTM!The
moduleResolution: "bundler"change aligns with Angular 21's modern build tooling (esbuild/vite). This is the correct configuration for projects using bundlers and works well with themodule: "ESNext"setting.libs/tools/tsconfig.json (1)
4-4: "preserve" module setting is appropriate for this library.The libs/tools library has no direct Node.js entry points or CLI scripts. It's a build-time utility library compiled to dist with TypeScript 5.9.3 support. The
module: "preserve"setting correctly delegates module transformation to the build system, which aligns with themoduleResolution: "bundler"configuration in the base tsconfig.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/flowbite-angular/package.json (1)
3-3: Library version not updated for breaking change.The PR description indicates this is a breaking change (migration to Angular 21), but the library version remains at
20.1.3. Consumers expect semver signals for breaking changes. Consider bumping to21.x.xto align with the Angular version and indicate the breaking change.
🤖 Fix all issues with AI agents
In @package.json:
- Line 71: Update the dependency entry for "@ng-doc/keywords-loaders" in
package.json from "20.1.0" to "21.0.0" so it matches the other @ng-doc/*
packages; locate the "@ng-doc/keywords-loaders" dependency line and change its
version string to "21.0.0", then run your package manager install to refresh
lockfile and verify tests/build.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/docs/src/main.server.tslibs/flowbite-angular/package.jsonpackage.json
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/main.server.ts
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2024-11-15T08:18:09.828Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 79
File: libs/flowbite-angular/README.md:87-92
Timestamp: 2024-11-15T08:18:09.828Z
Learning: In `libs/flowbite-angular/README.md`, components that are not yet built should retain their old documentation links and construction emojis until they are completed.
Applied to files:
libs/flowbite-angular/package.json
📚 Learning: 2024-12-11T09:25:50.819Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 88
File: libs/flowbite-angular/navbar/navbar.component.ts:99-99
Timestamp: 2024-12-11T09:25:50.819Z
Learning: In `libs/flowbite-angular/navbar/navbar.component.ts`, the `NavbarContentComponent` was already required because the `verify` function threw an error if `navbarContentChild` was undefined or null. Therefore, changing `contentChild` to `contentChild.required` does not introduce a breaking change.
Applied to files:
libs/flowbite-angular/package.json
📚 Learning: 2025-08-17T20:04:24.034Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 137
File: libs/flowbite-angular/table/src/table-body/table-body.directive.ts:1-3
Timestamp: 2025-08-17T20:04:24.034Z
Learning: In the flowbite-angular table module, the table state file is located at `libs/flowbite-angular/table/src/table/table-state.ts`, not at the root src level. Import paths like `../table/table-state` from subdirectories like table-body are correct.
Applied to files:
libs/flowbite-angular/package.json
📚 Learning: 2024-12-16T13:51:08.299Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 96
File: libs/flowbite-angular/scroll-top/scroll-top.component.ts:70-76
Timestamp: 2024-12-16T13:51:08.299Z
Learning: In `libs/flowbite-angular/scroll-top/scroll-top.component.ts`, when using signals in the template and checking `if (icon())`, it's safe to use `icon()!` within the block because `icon()` is guaranteed to be defined in this context.
Applied to files:
libs/flowbite-angular/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build code 🛠 (20)
🔇 Additional comments (3)
package.json (2)
29-56: Dependencies upgraded to Angular 21 ecosystem.The Angular packages are consistently upgraded to 21.x. Minor version differences between
@angular/ssr(21.0.5),@angular/cdk(21.0.6), and other packages (21.0.8) are expected as these packages may have independent release cycles.
58-113: DevDependencies aligned with Angular 21 tooling.Nx 22.3.3, Storybook 10.x, ng-packagr 21.0.1, and TypeScript 5.9.3 are significant upgrades. The
@angular-devkit/*and@angular-eslint/*packages follow Angular's versioning convention correctly. TypeScript 5.9.3 meets Angular 21's requirement of >= 5.9.0 and < 6.0.0.libs/flowbite-angular/package.json (1)
33-42: peerDependencies updated for Angular 21 ecosystem.The Angular peerDependency ranges (
>=21.0.0 < 22.0.0) are correctly specified to allow any Angular 21.x version. The ng-primitives packages (^0.90.0) are compatible with Angular 21, as version 0.90.0 and later versions (up to 0.99.6) all require only@angular/core >=20.0.0. With the caret constraint, npm will install the latest compatible 0.99.x release, which maintains Angular 21 compatibility.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @package.json:
- Around line 30-40: Two packages are out of sync with the rest of Angular:
update "@angular/cdk" and "@angular/ssr" to "21.0.8" so all @angular/* packages
use the same 21.0.8 patch; modify their version strings in package.json to
"21.0.8" (matching "@angular/core", "@angular/common", etc.), then run your
package manager (npm/pnpm/yarn) to reinstall and regenerate the lockfile so the
dependency tree is consistent.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
package.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 79
File: libs/flowbite-angular/README.md:87-92
Timestamp: 2024-11-15T08:18:09.828Z
Learning: In `libs/flowbite-angular/README.md`, components that are not yet built should retain their old documentation links and construction emojis until they are completed.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build code 🛠 (20)
🔇 Additional comments (3)
package.json (3)
47-56: Peer dependencies are compatible with Angular 21The current versions satisfy Angular 21's peer dependencies:
rxjs^7.4.0 matches the range^6.5.3 || ^7.4.0, andzone.js0.16.0 satisfies~0.15.0 || ~0.16.0. No install-time warnings or runtime issues will occur from these versions.Consider moving
@nx/devkittodevDependenciesif this package is not directly used by consuming applications.Likely an incorrect or invalid review comment.
42-45: The pinned@ng-doc/*@21.0.0versions are published and support Angular 21.All four packages exist on npm and declare peer dependency constraints compatible with Angular 21 (
@angular/common,@angular/core,@angular/cdk,@angular/routerall require>=21.0.0 <22.0.0). No action needed.Likely an incorrect or invalid review comment.
59-114: The peer dependency analysis reveals no actual compatibility issues. All declared peer dependencies are satisfied:
@angular/[email protected]has no peer dependency conflict with@angular/[email protected]—@angular/cli has no peer dependencies, and the patch-level difference within 21.0.x is acceptable.[email protected]satisfies requirements from@angular/[email protected]and@storybook/[email protected].@storybook/[email protected]accepts Angular 21.0.x (within its>=18.0.0 <22.0.0range).[email protected]has its swc peer dependencies met:@swc/core@~1.5.7and@swc-node/register@~1.9.1.The toolchain configuration is compatible; no validation action is required.
Likely an incorrect or invalid review comment.
| "@angular/animations": "21.0.8", | ||
| "@angular/cdk": "21.0.6", | ||
| "@angular/common": "21.0.8", | ||
| "@angular/compiler": "21.0.8", | ||
| "@angular/core": "21.0.8", | ||
| "@angular/forms": "21.0.8", | ||
| "@angular/platform-browser": "21.0.8", | ||
| "@angular/platform-browser-dynamic": "21.0.8", | ||
| "@angular/platform-server": "21.0.8", | ||
| "@angular/router": "21.0.8", | ||
| "@angular/ssr": "21.0.5", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Angular 21 compatibility @angular/cdk @angular/ssr version requirements same patch version
💡 Result:
Short answer: Yes — for Angular 21 you should use @angular/* packages that match the same major.minor.patch. In particular @angular/cdk must exactly match the Angular Material/CDK release (same patch), and other framework packages (including @angular/ssr) are intended to align with the core release series. [1][2][3]
Notes / sources:
- Angular release/versioning guidance (supported versions and package alignment expectations). [1]
- Angular Material runtime check warns if Material and CDK versions are not exactly the same (checks full version string). [2]
- Example @angular/cdk package.json shows peerDependencies that align to specific Angular major/minor ranges (CDK releases track Angular core versions). [3]
Align @angular/* package versions to the same patch release (21.0.8)
Angular 21 requires all @angular/* packages to use the same major.minor.patch version. Currently @angular/cdk (21.0.6) and @angular/ssr (21.0.5) lag behind the core packages (21.0.8). Update both to 21.0.8 to match the rest of the Angular framework packages.
🤖 Prompt for AI Agents
In @package.json around lines 30 - 40, Two packages are out of sync with the
rest of Angular: update "@angular/cdk" and "@angular/ssr" to "21.0.8" so all
@angular/* packages use the same 21.0.8 patch; modify their version strings in
package.json to "21.0.8" (matching "@angular/core", "@angular/common", etc.),
then run your package manager (npm/pnpm/yarn) to reinstall and regenerate the
lockfile so the dependency tree is consistent.
Waiting for ng-doc to update
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Issue Number
Issue Number: #142
Does this PR introduce a breaking change?
Migration to angular 21
Other information
Summary by CodeRabbit
Chores
Chores (Docs/Storybook)
Bug Fixes
Enhancements
✏️ Tip: You can customize this high-level summary in your review settings.