Upgrade project to Angular 18

[Celtian]

• upgrade to Angular 18
• browserlist updated
• migrated to esbuild
• stricter budgets
• warning messages in console resolved

Summary by CodeRabbit

• Chores

  • Upgraded the app and library to Angular 18.2, with updated CLI/build tools and dependencies (RxJS, Zone.js, tslib, ng-packagr).
  • Updated browser support targets to modern browsers; Internet Explorer 11 is no longer supported.
  • Aligned build configuration with Angular 18 (new target naming, updated entry points, tightened bundle budgets).

• Refactor

  • Streamlined build settings across environments for consistency with the latest Angular tooling.

• Notes

  • No user-facing feature changes or API changes; behavior remains the same.

[coderabbitai]

Walkthrough

Upgrades Angular-related dependencies from 17.x to 18.2.x, updates rxjs/tslib/zone.js versions, revises Browserslist targets, and migrates Angular CLI configuration: switches builder to application, renames targets from browserTarget to buildTarget, updates entry points and polyfills, and adjusts build budgets and flags.

Changes

Cohort / File(s)	Summary
Angular deps bump (library) packages/ngx/package.json	Bumps Angular packages to 18.2.14; updates rxjs (~7.8.1), tslib (^2.6.3), zone.js (0.14.10); aligns dev tooling (@Angular-devkit, @angular/cli, @angular/compiler-cli, @angular/language-service, ng-packagr) to 18.2.x.
Angular deps bump (test app) testapps/ngx/package.json	Mirrors Angular 18.x upgrades and runtime/tooling version bumps; no non-Angular dependency changes beyond listed updates.
Browserslist update testapps/ngx/.browserslistrc	Replaces broad queries with explicit modern browser versions; maintains not-dead and Firefox ESR; drops IE 11/IE_Mob 11.
Angular CLI config migration testapps/ngx/angular.json	Switches builder to @angular-devkit/build-angular:application; renames main→browser, polyfills string→array; replaces browserTarget→buildTarget across configs; tightens budgets; removes vendorChunk/buildOptimizer in prod; updates serve/extract-i18n/test/server/prerender sections accordingly.

Sequence Diagram(s)

sequenceDiagram
  participant Dev as Developer
  participant CLI as Angular CLI
  participant Builder as Build System (application)
  participant Browser as Browser

  Dev->>CLI: ng serve / ng build (Angular 18)
  CLI->>Builder: buildTarget (application) with browser entry & polyfills[]
  Note over Builder: Uses updated budgets and flags
  Builder-->>CLI: Build artifacts
  CLI-->>Browser: Serve application
  Note over Browser: Targets per updated .browserslistrc

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I thump my paws—new versions bloom,
Angular 18 sweeps the room.
Browsers list a fresher sky,
Targets switch and budgets fly.
RxJS hops, zone.js tunes—
Carrots cached in build cocoons.
🥕✨ shipping soon!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title “Upgrade project to Angular 18” directly captures the primary intent of the pull request, which is bumping the Angular framework and related dependencies to version 18. It is concise, specific, and omits extraneous detail, making it easy for team members to understand the main change at a glance.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

testapps/ngx/angular.json (1)

200-207: Critical: Incomplete migration from browserTarget to buildTarget.

The prerender configuration still uses the deprecated browserTarget property (lines 201 and 205) instead of buildTarget. This inconsistency will cause build failures or warnings in Angular 18.

Apply this diff to complete the migration:

           "configurations": {
             "stage": {
-              "browserTarget": "sampleapp:build:stage",
+              "buildTarget": "sampleapp:build:stage",
               "serverTarget": "sampleapp:server:stage"
             },
             "development": {
-              "browserTarget": "sampleapp:build:development",
+              "buildTarget": "sampleapp:build:development",
               "serverTarget": "sampleapp:server:development"
             }
           },

🧹 Nitpick comments (1)

testapps/ngx/package.json (1)

42-42: Consider version range consistency for ng-packagr.

This file uses an exact version 18.2.1 for ng-packagr, while packages/ngx/package.json uses ^18.2.1. While not critical, consider using consistent version ranges across the monorepo unless there's a specific reason for the exact pinning in the test app.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7fdef5e and ff3def1.

⛔ Files ignored due to path filters (2)

• package-lock.json is excluded by !**/package-lock.json
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

• packages/ngx/package.json (2 hunks)
• testapps/ngx/.browserslistrc (1 hunks)
• testapps/ngx/angular.json (3 hunks)
• testapps/ngx/package.json (1 hunks)

🔇 Additional comments (8)

packages/ngx/package.json (2)

22-33: LGTM! Consistent Angular 18 upgrade.

All Angular core dependencies are consistently upgraded to version 18.2.14, and the supporting libraries (rxjs, tslib, zone.js) are updated to compatible versions.

---

36-51: LGTM! Build tooling properly upgraded.

The Angular CLI, build tools, and ng-packagr are all consistently upgraded to version 18.x, aligning with the framework upgrade.

testapps/ngx/.browserslistrc (1)

8-18: LGTM! Modernized browser support matrix.

The updated Browserslist configuration aligns with Angular 18's recommended browser support, appropriately dropping IE 11 and focusing on recent versions of modern browsers.

testapps/ngx/package.json (1)

18-33: LGTM! Consistent Angular 18 upgrade.

All Angular dependencies are properly upgraded to version 18.2.14 with supporting libraries updated to compatible versions.

testapps/ngx/angular.json (4)

22-22: LGTM! Migrated to Angular 18 application builder.

The migration from browser to application builder is correct for Angular 18 and enables the new esbuild-based build system.

---

26-27: LGTM! Entry points updated correctly.

The renaming of main to browser and conversion of polyfills to an array format aligns with the Angular 18 application builder requirements.

---

55-61: Verify the stricter bundle budgets are appropriate.

The budget limits have been significantly tightened:

• Initial: 500KB warning / 1MB error (previously likely 2MB)
• Component styles: 2KB warning / 4KB error (previously likely 6KB)

While stricter budgets promote better performance, ensure these limits align with your actual bundle sizes and won't cause false positives during development. Test the build to confirm these thresholds are achievable.

---

94-111: LGTM! Build target references updated.

The browserTarget references have been correctly renamed to buildTarget in the serve and extract-i18n configurations, aligning with Angular 18 conventions.