chore: upgrade Angular and package dependencies to latest (ECD-UI)#81
chore: upgrade Angular and package dependencies to latest (ECD-UI)#81IndAlok wants to merge 3 commits into
Conversation
|
Warning Review limit reached
Next review available in: 11 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (15)
📝 WalkthroughWalkthroughThis PR upgrades the ECD-UI project from Angular 16 to Angular 21, updating Node.js version requirements, build tooling (ESLint flat config, lint-staged, tsconfig), and migrating HTTP client provider setup. It replaces legacy Angular Material imports with non-legacy equivalents across modules and components, marks components/directives/pipes as ChangesAngular 21 Migration
Estimated code review effort: 4 (Complex) | ~75 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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 |
|
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts (1)
176-183: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winResize listeners and ECharts instances accumulate without cleanup.
setQualityRatingDatais called multiple times per data-fetch cycle (line 144 with empty data, line 155 with API response, and again on eachcheckFrequencycall). Each call adds a new anonymousresizelistener and creates a newecharts.init()instance on the same DOM element — neither is ever removed or disposed. This is the same pattern as the other chart components in this PR.🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
export class CentreOverallQualityRatingChartComponent implements OnInit, DoCheck, OnDestroy { currentLanguageSet: any; qualityRatingData: any; frequencyList: any[] = []; frequency: any; month: any; enableMonthFilter = false; lastSixMonths: any = []; + private chartInstance: echarts.ECharts | null = null; + private resizeHandler: (() => void) | null = null; constructor( private setLanguageService: SetLanguageService, private qualitySupervisorService: QualitySupervisorService, private confirmationService: ConfirmationService, readonly sessionstorage:SessionStorageService, private masterService: MasterService ) {}setQualityRatingData(ratingData: any) { // ...existing filter code... const chartDom = document.getElementById('main'); if(chartDom){ + if (this.chartInstance) { + this.chartInstance.dispose(); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + - const myChart = echarts.init(chartDom); - window.addEventListener('resize', function(){ - if(myChart !== null && myChart !== undefined){ - myChart.resize(); - } - }); + this.chartInstance = echarts.init(chartDom); + this.resizeHandler = () => { + if (this.chartInstance) { + this.chartInstance.resize(); + } + }; + window.addEventListener('resize', this.resizeHandler); const option = { // ...existing option config... }; - option && myChart.setOption(option); + option && this.chartInstance.setOption(option); } // ...existing commented-out code... } + + ngOnDestroy() { + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + if (this.chartInstance) { + this.chartInstance.dispose(); + this.chartInstance = null; + } + } }🤖 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/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts` around lines 176 - 183, The resize handler and ECharts instance in setQualityRatingData are being recreated on every call without cleanup, causing leaks and duplicate listeners. Update centre-overall-quality-rating-chart.component.ts to store the chart instance and resize callback as class members, dispose/remove them before re-initializing, and add an ngOnDestroy cleanup path to remove the window resize listener and dispose the chart. Use the setQualityRatingData flow and the existing echarts.init logic as the place to centralize this lifecycle management.src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts (1)
140-148: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winResize listeners and ECharts instances accumulate without cleanup.
setTenureQualityRatingDatais called twice per data-fetch cycle (line 106 with empty data, line 116 with API response). Each call adds a new anonymousresizelistener and creates a newecharts.init()instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
export class TenureWiseQualityRatingsComponent implements OnInit, DoCheck, OnDestroy { currentLanguageSet: any; qualityRatingData: any; frequencyList: any[] = []; frequency: any; roleList: any = []; psmId: any; agentRole: any; + private chartInstance: echarts.ECharts | null = null; + private resizeHandler: (() => void) | null = null; /** * DE40034072 * 10-02-2023 */ constructor( private setLanguageService: SetLanguageService, private qualitySupervisorService: QualitySupervisorService, private confirmationService: ConfirmationService, readonly sessionstorage:SessionStorageService, private masterService: MasterService ) {}setTenureQualityRatingData(ratingData: any) { // ...existing filter code... const chartDom = document.getElementById('mainTenureChart'); if(chartDom){ + if (this.chartInstance) { + this.chartInstance.dispose(); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + - const myChart = echarts.init(chartDom); - - window.addEventListener('resize', function(){ - if(myChart !== null && myChart !== undefined){ - myChart.resize(); - } - }); + this.chartInstance = echarts.init(chartDom); + this.resizeHandler = () => { + if (this.chartInstance) { + this.chartInstance.resize(); + } + }; + window.addEventListener('resize', this.resizeHandler); // let option: EChartsOption; // myChart.resize({...}); const option: EChartsOption = { // ...existing option config... }; - option && myChart.setOption(option); + option && this.chartInstance.setOption(option); } // ...existing commented-out code... } + + ngOnDestroy() { + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + if (this.chartInstance) { + this.chartInstance.dispose(); + this.chartInstance = null; + } + } }🤖 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/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts` around lines 140 - 148, `setTenureQualityRatingData` is creating a new ECharts instance and anonymous resize listener every time it runs, so repeated fetch cycles leak charts and handlers. Update `TenureWiseQualityRatingsComponent` to store the chart instance and resize callback as fields, reuse or dispose the existing instance before calling `echarts.init`, and remove the listener when replacing it. Also add `ngOnDestroy` to cleanly remove the resize listener and dispose the chart instance when the component is destroyed.src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts (1)
229-237: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winResize listeners and ECharts instances accumulate without cleanup.
setChartDatais called twice per data-fetch cycle (line 168 with empty data, line 177 with API response). Each call adds a new anonymousresizelistener and creates a newecharts.init()instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
export class SkillsetWiseQualityRatingChartComponent implements OnInit, DoCheck, OnDestroy { currentLanguageSet: any; qualityRatingData: any; roleList: any[] = []; frequencyList: any[] = []; agentRole: any; month: any; psmId: any; monthsOfCurrentYear: any = []; + private chartInstance: echarts.ECharts | null = null; + private resizeHandler: (() => void) | null = null; constructor( private setLanguageService: SetLanguageService, private qualitySupervisorService: QualitySupervisorService, private confirmationService: ConfirmationService, readonly sessionstorage:SessionStorageService, private masterService: MasterService ) {}setChartData(xValue: any, yValue: any, ratingData: any) { const chartDom = document.getElementById('mainQualityChart'); if(chartDom){ + if (this.chartInstance) { + this.chartInstance.dispose(); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + - const myChart = echarts.init(chartDom); - - window.addEventListener('resize', function(){ - if(myChart !== null && myChart !== undefined){ - myChart.resize(); - } - }); + this.chartInstance = echarts.init(chartDom); + this.resizeHandler = () => { + if (this.chartInstance) { + this.chartInstance.resize(); + } + }; + window.addEventListener('resize', this.resizeHandler); // let option: EChartsOption; const option: EChartsOption = { // ...existing option config... }; - option && myChart.setOption(option); + option && this.chartInstance.setOption(option); } // ...existing commented-out code... } + + ngOnDestroy() { + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + if (this.chartInstance) { + this.chartInstance.dispose(); + this.chartInstance = null; + } + } }🤖 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/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts` around lines 229 - 237, The chart setup in setChartData is leaking both resize listeners and ECharts instances because each call creates a new echarts.init on the same DOM node and registers an anonymous window resize handler with no cleanup. Store the chart instance and resize callback as class members in skillset-wise-quality-rating-chart.component, dispose/remove them before creating a new chart, and implement ngOnDestroy to unregister the listener and dispose the chart. Keep the fix aligned with the existing setChartData flow so repeated data-fetch calls reuse or replace the prior instance cleanly.src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts (1)
150-157: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winResize listeners and ECharts instances accumulate without cleanup.
setAgentGradeDatais called multiple times per data-fetch cycle (line 119 with empty data, line 129 with API response, and again on eachcheckFrequencycall). Each invocation adds a new anonymousresizelistener towindowand creates a newecharts.init()instance on the same DOM element — neither is ever removed or disposed. Anonymous functions cannot be passed toremoveEventListener, so these handlers persist for the lifetime of the page. Over repeated interactions this leaks memory and causes an increasing number of resize handlers to fire on every window resize.🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
export class AgentQualityScoreChartComponent implements OnInit, DoCheck, OnDestroy { currentLanguageSet: any; qualityGradeData: any; frequencyList: any[] = []; frequency: any; lastSixMonths: any = []; enableMonthFilter = false; month: any; + private chartInstance: echarts.ECharts | null = null; + private resizeHandler: (() => void) | null = null; constructor( private setLanguageService: SetLanguageService, private qualitySupervisorService: QualitySupervisorService, private confirmationService: ConfirmationService, readonly sessionstorage:SessionStorageService, private masterService: MasterService ) {}setAgentGradeData(ratingData: any) { // ...existing filter/comment code... const chartDom = document.getElementById('agentQualityMain'); if(chartDom){ + if (this.chartInstance) { + this.chartInstance.dispose(); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + - const myChart = echarts.init(chartDom); - window.addEventListener('resize', function(){ - if(myChart !== null && myChart !== undefined){ - myChart.resize(); - } - }); + this.chartInstance = echarts.init(chartDom); + this.resizeHandler = () => { + if (this.chartInstance) { + this.chartInstance.resize(); + } + }; + window.addEventListener('resize', this.resizeHandler); + // let option: EChartsOption; const option: EChartsOption = { // ...existing option config... }; - option && myChart.setOption(option); + option && this.chartInstance.setOption(option); } // ...existing commented-out code... } + + ngOnDestroy() { + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + if (this.chartInstance) { + this.chartInstance.dispose(); + this.chartInstance = null; + } + } }🤖 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/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts` around lines 150 - 157, Resize handlers and ECharts instances in setAgentGradeData are being recreated on every call without cleanup, causing leaks and duplicate resize work. Refactor agent-quality-score-chart.component.ts to store the chart instance and the resize handler as class members instead of anonymous locals inside the document.getElementById('agentQualityMain') block, dispose/remove any existing listener before creating a new echarts.init() instance, and add ngOnDestroy to remove the window listener and dispose the chart when the component is destroyed.src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts (1)
122-130: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winResize listeners and ECharts instances accumulate without cleanup.
setCustomerSatisfactionDatais called twice per data-fetch cycle (line 88 with empty data, line 98 with API response). Each call adds a new anonymousresizelistener and creates a newecharts.init()instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
export class CustomerSatisfactionComponent implements OnInit, DoCheck, OnDestroy { currentLanguageSet: any; customerSatisfactionData: any; frequencyList: any[] = []; frequency: any; + private chartInstance: echarts.ECharts | null = null; + private resizeHandler: (() => void) | null = null; constructor( private setLanguageService: SetLanguageService, private qualitySupervisorService: QualitySupervisorService, private confirmationService: ConfirmationService, readonly sessionstorage:SessionStorageService, private masterService: MasterService ) {}setCustomerSatisfactionData(ratingData: any) { // ...existing filter code... const chartDom = document.getElementById('mainCustomerChart'); if(chartDom){ + if (this.chartInstance) { + this.chartInstance.dispose(); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + - const myChart = echarts.init(chartDom); - - window.addEventListener('resize', function(){ - if(myChart !== null && myChart !== undefined){ - myChart.resize(); - } - }); + this.chartInstance = echarts.init(chartDom); + this.resizeHandler = () => { + if (this.chartInstance) { + this.chartInstance.resize(); + } + }; + window.addEventListener('resize', this.resizeHandler); const option = { // ...existing option config... }; - option && myChart.setOption(option); + option && this.chartInstance.setOption(option); } // ...existing commented-out code... } + + ngOnDestroy() { + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + if (this.chartInstance) { + this.chartInstance.dispose(); + this.chartInstance = null; + } + } }🤖 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/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts` around lines 122 - 130, `setCustomerSatisfactionData` is creating a new ECharts instance and anonymous resize listener on every call without cleanup, so repeated fetch cycles leak both handlers and chart instances. Store the chart instance and resize handler as fields on `CustomerSatisfactionComponent`, reuse or dispose the existing `echarts.init()` instance before creating a new one, and remove the `window.addEventListener('resize', ...)` handler when replacing it. Also add `ngOnDestroy` to dispose the chart and unregister the resize listener so the component cleans up correctly.src/custom-theme.scss (1)
10-43: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winInclude
src/custom-theme.scssin the global styles bundle
src/custom-theme.scssisn’t referenced inangular.jsonor imported fromsrc/styles.css, so the custom Material theme never reaches the app at runtime. Add it to the globalstylesarray or import it fromsrc/styles.css.🤖 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/custom-theme.scss` around lines 10 - 43, The custom Angular Material theme in custom-theme.scss is defined but never loaded into the app. Make sure this stylesheet is included in the global build by either adding it to the angular.json styles bundle or importing it from styles.css, and keep the existing theme setup around mat.all-component-typographies, mat.core, and mat.all-component-themes intact so the theme is applied at runtime.
🧹 Nitpick comments (7)
src/app/app-modules/shared/directives/textareaWithCopyPaste.ts (1)
83-93: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove dead commented-out code instead of updating its types.
The commented-out
blockPaste/blockCopy/blockCuthandlers (lines 83-93) are dead code. Updating their type annotations toClipboardEventadds no value — the activeonPastehandler at line 69 already correctly usesClipboardEvent. Consider removing these commented blocks entirely.♻️ Proposed cleanup
-// `@HostListener`("paste", ["$event"]) blockPaste(event: ClipboardEvent) { -// event.preventDefault(); -// } - -// `@HostListener`("copy", ["$event"]) blockCopy(event: ClipboardEvent) { -// event.preventDefault(); -// } - -// `@HostListener`("cut", ["$event"]) blockCut(event: ClipboardEvent) { -// event.preventDefault(); -// }🤖 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/app/app-modules/shared/directives/textareaWithCopyPaste.ts` around lines 83 - 93, Remove the dead commented-out paste/copy/cut handlers from textareaWithCopyPasteDirective instead of changing their annotations. The commented block with blockPaste, blockCopy, and blockCut is unused, and the active onPaste handler already covers the ClipboardEvent typing. Keep the directive focused on the live methods and delete the commented code entirely.src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts (1)
44-54: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove commented-out dead code.
The commented-out
@HostListenerstubs forpaste,copy, andcutare dead code. Since the type was updated fromKeyboardEventtoClipboardEventin this PR, consider removing them entirely rather than maintaining commented-out stubs.♻️ Proposed cleanup
} - -// `@HostListener`("paste", ["$event"]) blockPaste(event: ClipboardEvent) { -// event.preventDefault(); -// } - -// `@HostListener`("copy", ["$event"]) blockCopy(event: ClipboardEvent) { -// event.preventDefault(); -// } - -// `@HostListener`("cut", ["$event"]) blockCut(event: ClipboardEvent) { -// event.preventDefault(); -// } }🤖 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/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts` around lines 44 - 54, Remove the commented-out dead code in noEmptySpaceWithAllChracs by deleting the unused `@HostListener` stubs for `blockPaste`, `blockCopy`, and `blockCut`; keep the directive focused on the active `ClipboardEvent` handling and do not leave commented method shells behind in the class.src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts (1)
29-29: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove dead commented-out import.
Line 29 contains a leftover commented-out import with a duplicate
MatInputModulereference. The actual import is correctly present on line 36. This dead code adds confusion during the migration review.🧹 Proposed cleanup
import { MatFormFieldModule } from '`@angular/material/form-field`'; -// import { MatInputModule, MatInputModule } from '`@angular/material/input`'; import { MatCardModule } from '`@angular/material/card`';🤖 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/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts` at line 29, Remove the dead commented-out import in associate-anm-mo.module.ts and keep the real Angular Material import only in the module’s import section. The commented line with the duplicate MatInputModule reference should be deleted, using the surrounding NgModule/import block and the MatInputModule symbol as the location cue.src/custom-theme.scss (1)
17-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueStale comment references pre-M2 typography API.
The comment mentions
mat.define-typography-config(), but the file has been migrated to M2 APIs (mat.m2-define-*). Update the comment to referencemat.m2-define-typography-config()for consistency.🤖 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/custom-theme.scss` at line 17, The comment in custom-theme.scss still references the old typography API, so update that stale reference to match the migrated M2 naming. In the commented-out mat.typography-hierarchy usage, replace the mention of mat.define-typography-config() with mat.m2-define-typography-config() so the documentation stays consistent with the rest of the theme setup and the mat namespace used in this file.src/app/app-modules/core/common-dialog/common-dialog.component.ts (1)
26-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsolidate duplicate imports from
@angular/material/dialog.Two separate import statements pull from the same module; merge for clarity.
♻️ Suggested consolidation
-import { - MatDialog, - MatDialogRef, - MAT_DIALOG_DATA, -} from '`@angular/material/dialog`'; -import { MatDialogModule } from '`@angular/material/dialog`'; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, + MatDialogModule, +} from '`@angular/material/dialog`';Note
MatDialogModuledoesn't appear to be referenced elsewhere in this file (noimportsarray since the component isstandalone: false); verify whether it's needed here at all.🤖 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/app/app-modules/core/common-dialog/common-dialog.component.ts` around lines 26 - 30, Consolidate the duplicated `@angular/material/dialog` imports in common-dialog.component.ts by merging MatDialogModule into the existing import list for MatDialog, MatDialogRef, and MAT_DIALOG_DATA, then remove the extra import statement; while doing so, verify whether MatDialogModule is used anywhere in CommonDialogComponent and delete it entirely if it is not needed.package.json (1)
45-45: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove
rxjs-compat— it conflicts with RxJS 7 and is unnecessary for Angular 21.
rxjs-compat@^6.6.7is a bridge for RxJS 5→6 migration. It declares a peer dependency onrxjs@^6, which conflicts withrxjs@~7.8.2in this project. This can trigger peer dependency warnings or, worse, dual RxJS installations leading to runtime type mismatches. Since the project already uses RxJS 7.x with Angular 16+, this package is dead weight.♻️ Proposed fix
"rxjs": "~7.8.2", - "rxjs-compat": "^6.6.7", "tslib": "^2.8.1",🤖 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 `@package.json` at line 45, Remove the rxjs-compat dependency from package.json because it is only for RxJS 5→6 migration and conflicts with the project’s RxJS 7 setup. Update the dependency list in the package manifest so the project relies on the existing rxjs package directly, and make sure any imports or usage patterns in the app are already compatible with RxJS 7; use the package.json entry for rxjs-compat as the unique marker to locate and delete it.angular.json (1)
113-116: 📐 Maintainability & Code Quality | 🔵 TrivialConsider migrating from
browsertoapplicationbuilder.The
buildTargetmigration is correct. The referenced build target (line 14) still uses@angular-devkit/build-angular:browser, deprecated since Angular 17. Consider migrating to@angular-devkit/build-angular:applicationin a future PR for full Angular 21 compatibility and access to modern build features (esbuild, native SSR, etc.).🤖 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 `@angular.json` around lines 113 - 116, The project’s build configuration still references the deprecated Angular browser builder, so update the build target definition used by the ECD-ui build to switch from `@angular-devkit/build-angular`:browser to `@angular-devkit/build-angular`:application. Locate the builder config for the ECD-ui build target and migrate it in a future-compatible way, keeping the existing buildTarget references intact while aligning the underlying builder with Angular 21 requirements. Ensure any related architect entries remain consistent after the builder change.
🤖 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 `@Common-UI`:
- Line 1: The Common-UI submodule pointer is set to a commit that is not
available on the remote, so update the submodule reference to a reachable commit
that exists in the Common-UI repository or ensure the referenced commit is
pushed before merging. Locate the submodule pin for Common-UI and change it to a
valid remote commit so fresh checkouts can initialize it successfully.
In `@eslint.config.cjs`:
- Around line 1-20: Add `@eslint/eslintrc` and `@eslint/js` as direct
devDependencies because eslint.config.cjs imports FlatCompat and js from those
packages. Update package.json accordingly so the ESLint config does not rely on
transitive installs, while keeping the existing FlatCompat setup and
.eslintrc.json compatibility intact.
In `@package.json`:
- Around line 50-82: The devDependencies in package.json are no longer aligned
with the repo’s Node 18 target because eslint and lint-staged require newer Node
versions. Update the tooling choices in the package.json dependency set so they
remain compatible with Node 18, or if the project is intentionally moving up,
adjust the repo’s Node version floor consistently across docs and CI; use the
existing package.json devDependency entries and the Node target references in
the repo to guide the change.
- Line 35: The package.json dependency entry for ecd-ui is malformed because it
uses file: without an actual target path, so update or remove that dependency in
the package.json manifest. Point ecd-ui to the intended local package directory
using a valid file: reference (for example, the correct sibling or nested
package), and make sure it is not a self-referencing placeholder. Verify the
dependency name and target path together so the local package can be resolved
correctly.
In
`@src/app/app-modules/associate-anm-mo/floating-videocall/floating-video.component.ts`:
- Line 7: The `@angular/core` import in floating-video.component.ts appears to
declare OnDestroy twice, which will cause a duplicate-identifier compile error.
Inspect the full import clause that includes ChangeDetectionStrategy and
OnDestroy, remove the repeated OnDestroy entry, and keep the class’s OnDestroy
implementation unchanged.
---
Outside diff comments:
In
`@src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts`:
- Around line 150-157: Resize handlers and ECharts instances in
setAgentGradeData are being recreated on every call without cleanup, causing
leaks and duplicate resize work. Refactor agent-quality-score-chart.component.ts
to store the chart instance and the resize handler as class members instead of
anonymous locals inside the document.getElementById('agentQualityMain') block,
dispose/remove any existing listener before creating a new echarts.init()
instance, and add ngOnDestroy to remove the window listener and dispose the
chart when the component is destroyed.
In
`@src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts`:
- Around line 176-183: The resize handler and ECharts instance in
setQualityRatingData are being recreated on every call without cleanup, causing
leaks and duplicate listeners. Update
centre-overall-quality-rating-chart.component.ts to store the chart instance and
resize callback as class members, dispose/remove them before re-initializing,
and add an ngOnDestroy cleanup path to remove the window resize listener and
dispose the chart. Use the setQualityRatingData flow and the existing
echarts.init logic as the place to centralize this lifecycle management.
In
`@src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts`:
- Around line 122-130: `setCustomerSatisfactionData` is creating a new ECharts
instance and anonymous resize listener on every call without cleanup, so
repeated fetch cycles leak both handlers and chart instances. Store the chart
instance and resize handler as fields on `CustomerSatisfactionComponent`, reuse
or dispose the existing `echarts.init()` instance before creating a new one, and
remove the `window.addEventListener('resize', ...)` handler when replacing it.
Also add `ngOnDestroy` to dispose the chart and unregister the resize listener
so the component cleans up correctly.
In
`@src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts`:
- Around line 229-237: The chart setup in setChartData is leaking both resize
listeners and ECharts instances because each call creates a new echarts.init on
the same DOM node and registers an anonymous window resize handler with no
cleanup. Store the chart instance and resize callback as class members in
skillset-wise-quality-rating-chart.component, dispose/remove them before
creating a new chart, and implement ngOnDestroy to unregister the listener and
dispose the chart. Keep the fix aligned with the existing setChartData flow so
repeated data-fetch calls reuse or replace the prior instance cleanly.
In
`@src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts`:
- Around line 140-148: `setTenureQualityRatingData` is creating a new ECharts
instance and anonymous resize listener every time it runs, so repeated fetch
cycles leak charts and handlers. Update `TenureWiseQualityRatingsComponent` to
store the chart instance and resize callback as fields, reuse or dispose the
existing instance before calling `echarts.init`, and remove the listener when
replacing it. Also add `ngOnDestroy` to cleanly remove the resize listener and
dispose the chart instance when the component is destroyed.
In `@src/custom-theme.scss`:
- Around line 10-43: The custom Angular Material theme in custom-theme.scss is
defined but never loaded into the app. Make sure this stylesheet is included in
the global build by either adding it to the angular.json styles bundle or
importing it from styles.css, and keep the existing theme setup around
mat.all-component-typographies, mat.core, and mat.all-component-themes intact so
the theme is applied at runtime.
---
Nitpick comments:
In `@angular.json`:
- Around line 113-116: The project’s build configuration still references the
deprecated Angular browser builder, so update the build target definition used
by the ECD-ui build to switch from `@angular-devkit/build-angular`:browser to
`@angular-devkit/build-angular`:application. Locate the builder config for the
ECD-ui build target and migrate it in a future-compatible way, keeping the
existing buildTarget references intact while aligning the underlying builder
with Angular 21 requirements. Ensure any related architect entries remain
consistent after the builder change.
In `@package.json`:
- Line 45: Remove the rxjs-compat dependency from package.json because it is
only for RxJS 5→6 migration and conflicts with the project’s RxJS 7 setup.
Update the dependency list in the package manifest so the project relies on the
existing rxjs package directly, and make sure any imports or usage patterns in
the app are already compatible with RxJS 7; use the package.json entry for
rxjs-compat as the unique marker to locate and delete it.
In `@src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts`:
- Line 29: Remove the dead commented-out import in associate-anm-mo.module.ts
and keep the real Angular Material import only in the module’s import section.
The commented line with the duplicate MatInputModule reference should be
deleted, using the surrounding NgModule/import block and the MatInputModule
symbol as the location cue.
In `@src/app/app-modules/core/common-dialog/common-dialog.component.ts`:
- Around line 26-30: Consolidate the duplicated `@angular/material/dialog` imports
in common-dialog.component.ts by merging MatDialogModule into the existing
import list for MatDialog, MatDialogRef, and MAT_DIALOG_DATA, then remove the
extra import statement; while doing so, verify whether MatDialogModule is used
anywhere in CommonDialogComponent and delete it entirely if it is not needed.
In `@src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts`:
- Around line 44-54: Remove the commented-out dead code in
noEmptySpaceWithAllChracs by deleting the unused `@HostListener` stubs for
`blockPaste`, `blockCopy`, and `blockCut`; keep the directive focused on the
active `ClipboardEvent` handling and do not leave commented method shells behind
in the class.
In `@src/app/app-modules/shared/directives/textareaWithCopyPaste.ts`:
- Around line 83-93: Remove the dead commented-out paste/copy/cut handlers from
textareaWithCopyPasteDirective instead of changing their annotations. The
commented block with blockPaste, blockCopy, and blockCut is unused, and the
active onPaste handler already covers the ClipboardEvent typing. Keep the
directive focused on the live methods and delete the commented code entirely.
In `@src/custom-theme.scss`:
- Line 17: The comment in custom-theme.scss still references the old typography
API, so update that stale reference to match the migrated M2 naming. In the
commented-out mat.typography-hierarchy usage, replace the mention of
mat.define-typography-config() with mat.m2-define-typography-config() so the
documentation stays consistent with the rest of the theme setup and the mat
namespace used in this file.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9e7a9d57-a68b-4072-b40f-6381eb9975b6
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (120)
.nvmrcCommon-UIangular.jsoneslint.config.cjslint-staged.config.cjspackage.jsonsrc/app/app-modules/associate-anm-mo/agents-innerpage/agents-innerpage.component.tssrc/app/app-modules/associate-anm-mo/associate-anm-mo.module.tssrc/app/app-modules/associate-anm-mo/beneficiary-call-history/beneficiary-call-history.component.tssrc/app/app-modules/associate-anm-mo/beneficiary-registration/ben-registration/ben-registration.component.tssrc/app/app-modules/associate-anm-mo/call-closure/call-closure.component.tssrc/app/app-modules/associate-anm-mo/czentrix-iframe/czentrix-iframe.component.tssrc/app/app-modules/associate-anm-mo/ecd-questionnaire/ecd-questionnaire.component.tssrc/app/app-modules/associate-anm-mo/floating-videocall/floating-video.component.tssrc/app/app-modules/associate-anm-mo/high-risk-reasons/high-risk-reasons.component.tssrc/app/app-modules/associate-anm-mo/outbound-worklist/outbound-worklist.component.tssrc/app/app-modules/associate-anm-mo/safe-url.pipe.tssrc/app/app-modules/associate-anm-mo/video-consultation/video-consultation.component.tssrc/app/app-modules/associate-anm-mo/view-details/view-details.component.tssrc/app/app-modules/core/activity-this-week/activity-this-week.component.tssrc/app/app-modules/core/alerts-notifications-locationmessages/open-alerts-notification-locationmessages/open-alerts-notification-locationmessages.component.tssrc/app/app-modules/core/call-statistics/call-statistics.component.tssrc/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.tssrc/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.tssrc/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.tssrc/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.tssrc/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.tssrc/app/app-modules/core/common-dialog/common-dialog.component.tssrc/app/app-modules/core/dashboard/dashboard.component.tssrc/app/app-modules/core/footer/footer.component.tssrc/app/app-modules/core/header/header.component.tssrc/app/app-modules/core/rating/rating.component.tssrc/app/app-modules/core/reports/reports.component.tssrc/app/app-modules/core/spinner/spinner.component.tssrc/app/app-modules/material/material.module.tssrc/app/app-modules/quality-auditor/call-audit/call-audit/call-audit.component.tssrc/app/app-modules/quality-auditor/call-rating/call-rating.component.tssrc/app/app-modules/quality-auditor/innerpage-quality-auditor/innerpage-quality-auditor/innerpage-quality-auditor.component.tssrc/app/app-modules/quality-auditor/quality-auditor.module.tssrc/app/app-modules/quality-auditor/view-casesheet/view-casesheet.component.tssrc/app/app-modules/quality-supervisor/activites/Grade-config/create-grade-config/create-grade-config.component.tssrc/app/app-modules/quality-supervisor/activites/Grade-config/edit-grade-config/edit-grade-config.component.tssrc/app/app-modules/quality-supervisor/activites/Grade-config/grade-configuration/grade-configuration.component.tssrc/app/app-modules/quality-supervisor/activites/agent-mapping-configuration/agent-mapping-configuration.component.tssrc/app/app-modules/quality-supervisor/activites/create-agent/create-agent.component.tssrc/app/app-modules/quality-supervisor/activites/edit-agent/edit-agent.component.tssrc/app/app-modules/quality-supervisor/activites/quality-audit-question-config/create-qa-question-config/create-qa-question-config/create-qa-question-config.component.tssrc/app/app-modules/quality-supervisor/activites/quality-audit-question-config/edit-qa-question-config/edit-qa-config/edit-qa-config.component.tssrc/app/app-modules/quality-supervisor/activites/quality-audit-question-config/qa-question-config/qa-question-config/qa-question-config.component.tssrc/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/createquality-section-configuration/createquality-section-configuration.component.tssrc/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/edit-quality-section-configuration/edit-quality-section-configuration.component.tssrc/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/quality-section-configuration/quality-section-configuration.component.tssrc/app/app-modules/quality-supervisor/activites/reports-quality-supervisor/reports-quality-supervisor.component.tssrc/app/app-modules/quality-supervisor/activites/sample-selection/create-sample-selection/create-sample-selection.component.tssrc/app/app-modules/quality-supervisor/activites/sample-selection/edit-sample-selection/edit-sample-selection.component.tssrc/app/app-modules/quality-supervisor/activites/sample-selection/sample-selection-configuration/sample-selection-configuration.component.tssrc/app/app-modules/quality-supervisor/innerpage-quality-supervisor/innerpage-supervisor/innerpage-supervisor.component.tssrc/app/app-modules/quality-supervisor/quality-supervisor.module.tssrc/app/app-modules/services/confirmation/confirmation.service.tssrc/app/app-modules/services/http-inteceptor/http-interceptor.service.tssrc/app/app-modules/shared/directives/email/my-email.directive.tssrc/app/app-modules/shared/directives/inputField/input-field.directive.tssrc/app/app-modules/shared/directives/mobileNumber/mobile-number.directive.tssrc/app/app-modules/shared/directives/name/my-name.directive.tssrc/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.tssrc/app/app-modules/shared/directives/password/my-password.directive.tssrc/app/app-modules/shared/directives/searchId/search-id-validator.directive.tssrc/app/app-modules/shared/directives/smsTemplate/sms-template-validator.directive.tssrc/app/app-modules/shared/directives/stringValidator/string-validator.directive.tssrc/app/app-modules/shared/directives/textarea/textarea.directive.tssrc/app/app-modules/shared/directives/textareaWithCopyPaste.tssrc/app/app-modules/shared/directives/username/user-name.directive.tssrc/app/app-modules/shared/utcdate.pipe.tssrc/app/app-modules/supervisor/activities/alerts/alert-notification/alert-notification.component.tssrc/app/app-modules/supervisor/activities/alerts/alert-notification/create-alert/create-alert.component.tssrc/app/app-modules/supervisor/activities/alerts/alert-notification/edit-alert/edit-alert.component.tssrc/app/app-modules/supervisor/activities/call-allocation/call-allocation/call-allocation.component.tssrc/app/app-modules/supervisor/activities/call-reallocation/call-reallocation/call-reallocation.component.tssrc/app/app-modules/supervisor/activities/force-logout/force-logout.component.tssrc/app/app-modules/supervisor/activities/notification-supervisor/create-notification/create-notification.component.tssrc/app/app-modules/supervisor/activities/notification-supervisor/edit-notification/edit-notification.component.tssrc/app/app-modules/supervisor/activities/notification-supervisor/supervisor-notification/supervisor-notification.component.tssrc/app/app-modules/supervisor/activities/supervisor-locationMessages/create-location-message/create-location-message.component.tssrc/app/app-modules/supervisor/activities/supervisor-locationMessages/edit-location-message/edit-location-message.component.tssrc/app/app-modules/supervisor/activities/supervisor-locationMessages/location-messages/location-messages.component.tssrc/app/app-modules/supervisor/activities/uploadexcel/uploadexcel.component.tssrc/app/app-modules/supervisor/configurations/call-configurations/call-configuration/call-configuration.component.tssrc/app/app-modules/supervisor/configurations/call-configurations/call-section-questionaire-mapping/call-section-questionaire-mapping.component.tssrc/app/app-modules/supervisor/configurations/call-configurations/create-call-configuration/create-call-configuration.component.tssrc/app/app-modules/supervisor/configurations/call-configurations/edit-call-configuration/edit-call-configuration.component.tssrc/app/app-modules/supervisor/configurations/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.tssrc/app/app-modules/supervisor/configurations/dial-preference/dial-preference/dial-preference.component.htmlsrc/app/app-modules/supervisor/configurations/dial-preference/dial-preference/dial-preference.component.tssrc/app/app-modules/supervisor/configurations/question-Mapping/create-question-mapping/create-question-mapping.component.tssrc/app/app-modules/supervisor/configurations/question-Mapping/edit-question-mapping/edit-question-mapping.component.tssrc/app/app-modules/supervisor/configurations/question-Mapping/map-questionaire-configuration/map-questionaire-configuration.component.tssrc/app/app-modules/supervisor/configurations/questionnaire-config/create-questionnaire/create-questionnaire.component.htmlsrc/app/app-modules/supervisor/configurations/questionnaire-config/create-questionnaire/create-questionnaire.component.tssrc/app/app-modules/supervisor/configurations/questionnaire-config/questionnaire-configuration/questionnaire-configuration.component.tssrc/app/app-modules/supervisor/configurations/section-configurations/create-section-configuration/create-section-configuration.component.tssrc/app/app-modules/supervisor/configurations/section-configurations/edit-section-configuration/edit-section-configuration.component.tssrc/app/app-modules/supervisor/configurations/section-configurations/section-configuration/section-configuration.component.tssrc/app/app-modules/supervisor/configurations/section-questionnaire-map/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.htmlsrc/app/app-modules/supervisor/configurations/section-questionnaire-map/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.tssrc/app/app-modules/supervisor/configurations/section-questionnaire-map/edit-section-questionnaire-mapping/edit-section-questionnaire-mapping.component.tssrc/app/app-modules/supervisor/configurations/section-questionnaire-map/section-questionnaire-mapping/section-questionnaire-mapping.component.tssrc/app/app-modules/supervisor/configurations/sms-template/sms-template/sms-template.component.tssrc/app/app-modules/supervisor/innerpage-supervisor/innerpage-supervisor/innerpage-supervisor.component.tssrc/app/app-modules/supervisor/supervisor-reports/supervisor-reports/supervisor-reports.component.tssrc/app/app-modules/supervisor/supervisor.module.tssrc/app/app-modules/user-login/captcha/captcha.component.tssrc/app/app-modules/user-login/forgot-password/forgot-password.component.tssrc/app/app-modules/user-login/login/login.component.tssrc/app/app-modules/user-login/role-selection/role-selection.component.tssrc/app/app-modules/user-login/set-password/set-password.component.tssrc/app/app-modules/user-login/set-security-questions/set-security-questions.component.tssrc/app/app.component.tssrc/app/app.module.tssrc/custom-theme.scsstsconfig.json
| "@angular-devkit/build-angular": "^21.2.10", | ||
| "@angular-eslint/builder": "21.3.1", | ||
| "@angular-eslint/eslint-plugin": "21.3.1", | ||
| "@angular-eslint/eslint-plugin-template": "21.3.1", | ||
| "@angular-eslint/schematics": "21.3.1", | ||
| "@angular-eslint/template-parser": "21.3.1", | ||
| "@angular/cli": "^21.2.10", | ||
| "@angular/compiler-cli": "^21.2.12", | ||
| "@commitlint/cli": "^21.0.1", | ||
| "@commitlint/config-conventional": "^21.0.1", | ||
| "@types/crypto-js": "^4.2.2", | ||
| "@types/file-saver": "^2.0.7", | ||
| "@types/jasmine": "~6.0.0", | ||
| "@types/jquery": "^4.0.0", | ||
| "@typescript-eslint/eslint-plugin": "^8.59.3", | ||
| "@typescript-eslint/parser": "^8.59.3", | ||
| "commitizen": "^4.3.1", | ||
| "cz-conventional-changelog": "^3.3.0", | ||
| "ejs": "^3.1.9", | ||
| "eslint": "^8.51.0", | ||
| "eslint-config-prettier": "^9.1.0", | ||
| "eslint-plugin-prettier": "^5.1.3", | ||
| "ejs": "^5.0.2", | ||
| "eslint": "^10.3.0", | ||
| "eslint-config-prettier": "^10.1.8", | ||
| "eslint-plugin-prettier": "^5.5.5", | ||
| "husky": "^9.1.7", | ||
| "jasmine-core": "~4.3.0", | ||
| "karma": "~6.4.0", | ||
| "karma-chrome-launcher": "~3.1.0", | ||
| "karma-coverage": "~2.2.0", | ||
| "jasmine-core": "~6.2.0", | ||
| "karma": "~6.4.4", | ||
| "karma-chrome-launcher": "~3.2.0", | ||
| "karma-coverage": "~2.2.1", | ||
| "karma-jasmine": "~5.1.0", | ||
| "karma-jasmine-html-reporter": "~2.0.0", | ||
| "lint-staged": "^15.2.2", | ||
| "prettier": "^3.2.5", | ||
| "prettier-eslint": "^16.3.0", | ||
| "typescript": "5.1.3" | ||
| "karma-jasmine-html-reporter": "~2.2.0", | ||
| "lint-staged": "^17.0.4", | ||
| "prettier": "^3.8.3", | ||
| "prettier-eslint": "^16.4.2", | ||
| "typescript": "~5.9.3" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check ESLint 10 peer dep support from `@typescript-eslint/parser`
curl -s "https://registry.npmjs.org/@typescript-eslint/parser/latest" | jq '{version, peerDependencies, engines}'
# Check ESLint 10 exists and its breaking changes
curl -s "https://registry.npmjs.org/eslint/10.3.0" | jq '{version, engines}'
# Verify TypeScript 5.9 exists
curl -s "https://registry.npmjs.org/typescript/5.9.3" | jq '{version, engines}'
# Check lint-staged 17 exists
curl -s "https://registry.npmjs.org/lint-staged/17.0.4" | jq '{version, engines}'Repository: PSMRI/ECD-UI
Length of output: 578
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the project manifest around the top-level metadata and devDependencies
python3 - <<'PY'
from pathlib import Path
import json
p = Path("package.json")
data = json.loads(p.read_text())
print("name:", data.get("name"))
print("version:", data.get("version"))
print("engines:", data.get("engines"))
print("packageManager:", data.get("packageManager"))
print("devDependencies:")
for k in ["eslint","`@typescript-eslint/parser`","`@typescript-eslint/eslint-plugin`","typescript","lint-staged","`@commitlint/cli`","prettier-eslint","`@angular-eslint/builder`","`@angular-eslint/eslint-plugin`"]:
if k in data.get("devDependencies", {}):
print(f" {k}: {data['devDependencies'][k]}")
PY
# Find any documented Node version requirements in the repo
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' --glob '!coverage' 'node\s+v?(\d+|\d+\.\d+)|engines|packageManager|lint-staged|eslint@|typescript@' .Repository: PSMRI/ECD-UI
Length of output: 50368
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Look for explicit Node/runtime constraints in common repo files
for f in .nvmrc .node-version .tool-versions README.md CONTRIBUTING.md package.json .github/workflows/*.yml .github/workflows/*.yaml; do
[ -e "$f" ] || continue
echo "### $f"
sed -n '1,220p' "$f" | rg -n 'node|Node|npm|pnpm|yarn|volta|engines|lts|>=|lint-staged|eslint|typescript' -n || true
done
# Show any files that look like runtime/version pins
fd -a -d 2 '(^\.nvmrc$|^\.node-version$|^\.tool-versions$|^package\.json$|^README\.md$|^CONTRIBUTING\.md$|workflow)' .Repository: PSMRI/ECD-UI
Length of output: 2909
Align the dev tooling with the repo’s Node 18 target
@typescript-eslint/*@8.59.3`` is fine with ESLint 10 and TypeScript 5.9, buteslint@10.3.0requires Node `^20.19.0 || ^22.13.0 || >=24` and `lint-staged@17.0.4` requires Node `>=22.22.1`. Either raise the Node floor across docs/CI or keep these devDependencies on Node 18–compatible releases.
🤖 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 `@package.json` around lines 50 - 82, The devDependencies in package.json are
no longer aligned with the repo’s Node 18 target because eslint and lint-staged
require newer Node versions. Update the tooling choices in the package.json
dependency set so they remain compatible with Node 18, or if the project is
intentionally moving up, adjust the repo’s Node version floor consistently
across docs and CI; use the existing package.json devDependency entries and the
Node target references in the repo to guide the change.
|



📋 Description
JIRA ID: N/A
Related issue: PSMRI/AMRIT#15
This PR upgrades ECD-UI to Angular 21 (superseding earlier Angular 19-only attempts) and updates dependencies to latest compatible versions.
Summary of changes:
standalone: falsemigration for NgModule declarations.Motivation:
✅ Type of Change
ℹ️ Additional Information
Validation:
npm cipassed.ng build --configuration=ci --aotpassed.Common-UI dependency:
Summary by CodeRabbit
New Features
Bug Fixes