Skip to content

Upgrade Angular app to 16#59

Open
colorbank wants to merge 2 commits into
BAWES-Universe:masterfrom
colorbank:copilot/angular-15-to-16-upgrade
Open

Upgrade Angular app to 16#59
colorbank wants to merge 2 commits into
BAWES-Universe:masterfrom
colorbank:copilot/angular-15-to-16-upgrade

Conversation

@colorbank

@colorbank colorbank commented May 15, 2026

Copy link
Copy Markdown

Summary

  • Upgrades Angular framework/CLI/compiler/language-service/build tooling from 15 to 16
  • Updates Ionic, TypeScript, Zone.js, Angular ESLint tooling, CKEditor wrapper, and Ionic Storage for Angular 16 compatibility
  • Replaces unsupported ng5-slider usage with @angular-slider/ngx-slider
  • Adds local compatibility shims for angular-instantsearch and ion2-calendar imports that do not have Angular 16-compatible releases
  • Removes Angular 16-incompatible entryComponents and BrowserTransferStateModule usage

Closes #25

Validation

  • npm install --package-lock-only
  • node ./node_modules/@angular/cli/bin/ng build --configuration production --progress=false
  • ng serve --configuration development --host 127.0.0.1 --port 4300 responded HTTP 200
  • targeted eslint check for touched age refinement template

Notes

Full project lint still reports pre-existing style/template issues across the app (selector prefixes, == vs ===, empty lifecycle methods), so I kept this PR focused on the Angular 16 migration and build compatibility.

Summary by CodeRabbit

Release Notes

  • New Features

    • Enhanced search functionality with improved parameter handling and integration
    • Calendar modal with improved date-range selection
  • Upgrades

    • Updated to Angular 16 framework for better performance and compatibility
    • Refreshed slider components across age, date-range, and range refinement interfaces
  • Chores

    • Updated development tooling and dependencies to align with Angular 16 standards

Review Change Stack

Update Angular, Ionic, TypeScript, and compatible tooling for the Angular 16 migration. Replace unsupported Angular wrappers with local compatibility shims and swap ng5-slider for ngx-slider so production builds and dev serve work on the upgraded stack.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@coderabbitai

coderabbitai Bot commented May 15, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@colorbank has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 52 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 04f67705-3920-44e4-9ce0-e0d385cdb8dc

📥 Commits

Reviewing files that changed from the base of the PR and between 877336e and 56de679.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (2)
  • package.json
  • src/compat/angular-instantsearch/index.ts
📝 Walkthrough

Walkthrough

This PR completes Angular 15→16 migration by upgrading core and devtools packages, replacing ng5-slider with ngx-slider across refinement components, introducing local compatibility layers for angular-instantsearch and ion2-calendar npm packages, adapting code to Angular 16 patterns (removing BrowserTransferStateModule, entryComponents, and CanActivate implementations), and integrating InstantSearch with explicit searchParameters passing.

Changes

Angular 15→16 Upgrade and Library Migration

Layer / File(s) Summary
Angular 16 dependency upgrade
package.json
Angular core, platform, build-tools, and ESLint tooling upgraded to 16.x; @angular-slider/ngx-slider added; deprecated ng5-slider, angular-instantsearch, ion2-calendar removed; TypeScript bumped to ~4.9.5.
Slider library migration (ng5-slider → ngx-slider)
src/app/components/age-refinement-list/age-refinement-list.component.html, src/app/components/age-refinement-list/age-refinement-list.component.ts, src/app/components/age-refinement-list/age-refinement-list.module.ts, src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts, src/app/components/range-refinement-list/range-refinement-list.html, src/app/components/range-refinement-list/range-refinement-list.module.ts, src/app/components/range-refinement-list/range-refinement-list.ts, src/global.scss
Template sliders swap from ng5-slider to ngx-slider; Options imported from @angular-slider/ngx-slider; format handlers converted to string converters; module imports updated; SCSS selectors and styling renamed for ngx-slider.
Angular 16 compatibility: module and guard updates
src/app/app.module.ts, src/app/components/select-search/select-search.module.ts, src/app/providers/guards/login-guard.service.ts, src/app/providers/guards/story-guard.service.ts
Removed BrowserTransferStateModule from app.module imports; removed entryComponents from SelectSearchModule; removed CanActivate interface from LoginGuard and StoryGuard (methods retained).
TypeScript config and path aliasing
tsconfig.json
Added skipLibCheck and path mappings redirecting angular-instantsearch and ion2-calendar imports to src/compat implementations.
InstantSearch compatibility layer and integration
src/compat/angular-instantsearch/index.ts, src/compat/angular-instantsearch/utils.ts, src/app/pages/logged-in/candidate/candidate-search/candidate-search.page.ts, src/app/pages/logged-in/fulltimer/fulltimer-search/fulltimer-search.page.ts
New NgAisInstantSearch service manages instantsearch instance and widget registry; BaseWidget/TypedBaseWidget provide connector abstractions; AisInstantsearchComponent handles init/disposal; AisInfiniteHitsComponent renders hits; AisHighlightComponent highlights fields; candidate-search and fulltimer-search pass searchParameters to InstantSearch config.
Calendar compatibility layer
src/compat/ion2-calendar/index.ts
New CalendarModal component supports single/range date picking, string-to-unix conversion, and optional range validation; exports CalendarResult and CalendarModalOptions types; provides CalendarModule with Angular/Ionic/Forms wiring.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 From fiften to sixteen, the upgrade's complete,
With slider migrations making components sweet,
Compat layers conjured from npm's old past,
Guards freed from interfaces—less strict, more fast!
Angular's evolution, one version ahead.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly matches the main objective of the changeset: upgrading the Angular framework from version 15 to version 16.
Linked Issues check ✅ Passed The PR successfully fulfills all coding requirements from issue #25: Angular packages upgraded to v16, TypeScript updated to ~4.9.5, ng5-slider replaced with ngx-slider, compilation errors fixed, Angular 16-incompatible patterns removed, and app builds/serves successfully.
Out of Scope Changes check ✅ Passed All changes align with the scope defined in issue #25. The PR includes necessary compatibility shims for angular-instantsearch and ion2-calendar (local compat layers), removes unsupported patterns, and focuses on Angular 16 migration without upgrading beyond v16 or migrating to standalone components.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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

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

@dosubot

dosubot Bot commented May 15, 2026

Copy link
Copy Markdown

Related Knowledge

1 document with suggested updates is ready for review.

BAWES Universe

plugn-dashboard-ionic – Setup & API Config
View Suggested Changes
@@ -2,7 +2,7 @@
 
 ### Stack
 
-This project uses [Ionic Angular with Angular 14.x and Ionic Angular 6.1.9](https://github.com/BAWES-Universe/plugn-dashboard-ionic/blob/df58999aa0bc4780cf96becde4c3dc05da643a1a/package.json#L6-L55).
+This project uses [Ionic Angular with Angular 16 and Ionic Angular 6.7.5](https://github.com/BAWES-Universe/plugn-dashboard-ionic/blob/df58999aa0bc4780cf96becde4c3dc05da643a1a/package.json#L6-L55).
 
 ### Install & Run Commands
 
@@ -75,7 +75,7 @@
 
 ### Stack
 
-This project uses [Ionic Angular with Angular 14.x and Ionic Angular 6.1.9](https://github.com/BAWES-Universe/plugn-ionic/blob/6766364857d8146d8b89356a015798e053357bbd/package.json#L6-L50).
+This project uses [Ionic Angular with Angular 16 and Ionic Angular 6.7.5](https://github.com/BAWES-Universe/plugn-ionic/blob/6766364857d8146d8b89356a015798e053357bbd/package.json#L6-L50).
 
 ### Install & Run Commands
 

[Accept] [Edit] [Decline]

How did I do? Any feedback?  Join Discord

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/compat/angular-instantsearch/index.ts (1)

133-135: 💤 Low value

Consider adding an explicit dependency or property for instantSearchInstance.

The (this as any).instantSearchInstance cast bypasses type safety and makes the dependency implicit. While this works for a compatibility layer, consider either:

  • Adding a protected property instantSearchInstance that subclasses must set
  • Or injecting NgAisInstantSearch explicitly and storing it

Given this is a temporary compatibility shim, this is not critical but would improve maintainability.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/compat/angular-instantsearch/index.ts` around lines 133 - 135, The getter
ngAisInstantSearch currently casts via (this as any).instantSearchInstance which
bypasses types; declare a protected property instantSearchInstance?:
NgAisInstantSearch on the class so subclasses or the constructor can set it, and
change the getter to return this.instantSearchInstance; alternatively add a
constructor parameter (or setter) that accepts NgAisInstantSearch and assigns it
to the protected instantSearchInstance property so the dependency is explicit
and type-safe (refer to ngAisInstantSearch getter and the new
instantSearchInstance property/constructor assignment).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@package.json`:
- Around line 71-74: The package.json currently declares "eslint" at an older
range that conflicts with the new `@angular-eslint/`* 16.3.1 peer dependency;
update the "eslint" dependency entry (the "eslint" key in package.json) to a
compatible range such as "^7.20.0" or "^8.0.0" to satisfy `@angular-eslint` peer
requirements and prevent lint failures, then run install and re-run lint to
verify no other peer conflicts remain.

In `@src/compat/angular-instantsearch/index.ts`:
- Around line 209-217: The initialize() guard prevents reinitialization when
instantSearchInstance is truthy and ngOnDestroy currently disposes the instance
without clearing that reference, blocking ngOnChanges-triggered
reinitialization; update ngOnDestroy to set this.instantSearchInstance = null
after disposing, and/or change the initialize() guard to allow reinitialization
when config or indexName have changed (e.g., compare current resolvedIndexName
or config identity before returning). Ensure you modify ngOnDestroy(),
initialize(), and reference this.instantSearchInstance, config, indexName, and
resolvedIndexName accordingly so the component can rebuild the instance when
inputs change.

---

Nitpick comments:
In `@src/compat/angular-instantsearch/index.ts`:
- Around line 133-135: The getter ngAisInstantSearch currently casts via (this
as any).instantSearchInstance which bypasses types; declare a protected property
instantSearchInstance?: NgAisInstantSearch on the class so subclasses or the
constructor can set it, and change the getter to return
this.instantSearchInstance; alternatively add a constructor parameter (or
setter) that accepts NgAisInstantSearch and assigns it to the protected
instantSearchInstance property so the dependency is explicit and type-safe
(refer to ngAisInstantSearch getter and the new instantSearchInstance
property/constructor assignment).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b1061cca-531c-4546-80d1-7400286b5330

📥 Commits

Reviewing files that changed from the base of the PR and between 39a33ff and 877336e.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (19)
  • package.json
  • src/app/app.module.ts
  • src/app/components/age-refinement-list/age-refinement-list.component.html
  • src/app/components/age-refinement-list/age-refinement-list.component.ts
  • src/app/components/age-refinement-list/age-refinement-list.module.ts
  • src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts
  • src/app/components/range-refinement-list/range-refinement-list.html
  • src/app/components/range-refinement-list/range-refinement-list.module.ts
  • src/app/components/range-refinement-list/range-refinement-list.ts
  • src/app/components/select-search/select-search.module.ts
  • src/app/pages/logged-in/candidate/candidate-search/candidate-search.page.ts
  • src/app/pages/logged-in/fulltimer/fulltimer-search/fulltimer-search.page.ts
  • src/app/providers/guards/login-guard.service.ts
  • src/app/providers/guards/story-guard.service.ts
  • src/compat/angular-instantsearch/index.ts
  • src/compat/angular-instantsearch/utils.ts
  • src/compat/ion2-calendar/index.ts
  • src/global.scss
  • tsconfig.json
💤 Files with no reviewable changes (1)
  • src/app/components/select-search/select-search.module.ts

Comment thread package.json
Comment thread src/compat/angular-instantsearch/index.ts

creamstart commented May 15, 2026

Copy link
Copy Markdown

Removed automated assistant update.

@colorbank

Copy link
Copy Markdown
Author

The CodeRabbit actionable comments are addressed in the latest commit and the visible PR check is passing. This looks ready for maintainer review/merge from my side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UPGRADE] Angular 15 → 16 incremental migration

2 participants