chore(release): update to angular 21 #149
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Waiting for ng-doc to update
WalkthroughThis pull request performs a major version upgrade across the monorepo, updating Angular from 20.x to 21.x, Nx dependencies, and related tooling. It introduces zone change detection providers to bootstrap configurations, updates TypeScript compiler options for module preservation and bundler-style resolution, adjusts peer dependencies, and modifies project and release configurations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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.
| const bootstrap = (context: BootstrapContext) => | ||
| bootstrapApplication( | ||
| AppComponent, | ||
| { ...config, providers: [provideZoneChangeDetection(), ...config.providers] }, | ||
| context | ||
| ); |
There was a problem hiding this comment.
Missing import for provideZoneChangeDetection.
The bootstrap function uses provideZoneChangeDetection() on Line 10, but this function is not imported. This will cause a runtime error.
🔎 Proposed fix
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
import type { BootstrapContext } from '@angular/platform-browser';
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideZoneChangeDetection } from '@angular/core';
const bootstrap = (context: BootstrapContext) =>
bootstrapApplication(
AppComponent,
{ ...config, providers: [provideZoneChangeDetection(), ...config.providers] },
context
);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/docs/src/main.server.ts around lines 7-12, the bootstrap function calls
provideZoneChangeDetection() but that symbol is not imported; add an import for
provideZoneChangeDetection from the Angular core package at the top of the file
(e.g. include provideZoneChangeDetection in the existing import list from
'@angular/core') so the function is available at runtime.
| "@angular/cdk": ">=21.0.0 < 22.0.0", | ||
| "@angular/core": ">=21.0.0 < 22.0.0", | ||
| "@ng-icons/core": ">=33.0.0", | ||
| "@ng-primitives/state": ">=0.90.0", | ||
| "@tailwindcss/postcss": "^4.0.0", | ||
| "ng-primitives": ">=0.57.0", | ||
| "ng-primitives": ">=0.90.0", | ||
| "rxjs": "^7.4.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify peer dependency versions exist and check compatibility
echo "=== Checking @ng-icons/core versions ==="
npm view @ng-icons/core versions --json | jq -r '.[] | select(test("^33\\."))'
echo -e "\n=== Checking @ng-icons/core peerDependencies ==="
npm view @ng-icons/core@33.0.0 peerDependencies --json
echo -e "\n=== Checking ng-primitives versions ==="
npm view ng-primitives versions --json | jq -r '.[] | select(test("^0\\.9[0-9]\\."))'
echo -e "\n=== Checking ng-primitives peerDependencies ==="
npm view ng-primitives@0.90.0 peerDependencies --json 2>/dev/null || echo "Version 0.90.0 not found"
echo -e "\n=== Checking @ng-primitives/state versions ==="
npm view @ng-primitives/state versions --json | jq -r '.[] | select(test("^0\\.9[0-9]\\."))'
echo -e "\n=== Checking @ng-primitives/state peerDependencies ==="
npm view @ng-primitives/state@0.90.0 peerDependencies --json 2>/dev/null || echo "Version 0.90.0 not found"Repository: themesberg/flowbite-angular
Length of output: 781
Add missing peer dependency: @angular/forms.
The versions of @ng-icons/core (33.x), @ng-primitives/state (0.90.0), and ng-primitives (0.90.0) are all available and compatible with Angular 21. However, ng-primitives 0.90.0 requires @angular/forms as a peer dependency, which is currently missing from package.json and must be added.
🤖 Prompt for AI Agents
In libs/flowbite-angular/package.json around lines 34 to 40, the package.json is
missing the required peer dependency @angular/forms; add "@angular/forms":
">=21.0.0 <22.0.0" to the peerDependencies (or dependencies if appropriate for
this package) so it matches the Angular 21 version range used for @angular/core
and other Angular peers, ensuring ng-primitives 0.90.0 has its required peer
satisfied.
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
✏️ Tip: You can customize this high-level summary in your review settings.