Migrate to Angular 21 with zoneless change detection#67
Open
Migrate to Angular 21 with zoneless change detection#67
Conversation
- Upgrade to Angular 21 and remove zone.js dependency - Convert components to use signals for reactive state management - Replace deep cloning with refreshTrigger pattern for UI updates - Fix compare page refresh button to properly restart polling loop - Add tree-utils.ts with centralized tree operations - Update all tests for zoneless change detection patterns Key changes: - All components now use OnPush change detection with signals - Removed polyfills.ts (zone.js no longer needed) - provideExperimentalZonelessChangeDetection in main.ts - Consistent refreshTrigger pattern across download/connect components
Code Review Agent (Python)\nNo Python files changed. Skipping analysis. |
AI Governance checks failedPlease fix the following before re-running checks:
Helpful links:
After edits, push updates or re-run the workflow to validate. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the frontend to Angular 21 with a zoneless, signal-based change detection approach, updating components/services/tests accordingly and removing the app’s Zone.js runtime dependency.
Changes:
- Upgraded Angular/PrimeNG deps and switched the app bootstrap to zoneless change detection.
- Refactored multiple components/services to use signals (
signal,computed,input,output) withOnPush. - Introduced centralized tree helpers (
tree-utils) and adjusted repo options APIs to support hierarchical responses.
Reviewed changes
Copilot reviewed 72 out of 73 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.spec.json | Removes polyfills.ts from test TS compilation inputs. |
| tsconfig.app.json | Removes polyfills.ts from app TS compilation inputs. |
| src/test.ts | Drops explicit zone.js/testing import (handled via test polyfills config). |
| src/polyfills.ts | Deletes Zone-based polyfills entrypoint. |
| src/main.ts | Switches bootstrap providers to zoneless change detection and updates theming imports. |
| src/app/submitted-file/submitted-file.component.ts | Migrates to OnPush + computed signals for derived UI state. |
| src/app/submitted-file/submitted-file.component.spec.ts | Updates tests for signal-based APIs and renamed computed getters. |
| src/app/submitted-file/submitted-file.component.html | Updates template bindings to signal/computed accessors. |
| src/app/submit/submit.component.ts | Converts local state to signals/computeds and adjusts transfer tracking. |
| src/app/submit/submit.component.html | Updates template bindings for signals and callback inputs. |
| src/app/submit.service.ts | Reads credentials via signal-based getters instead of mutable object. |
| src/app/submit.service.spec.ts | Updates mock credentials service to provide signal-style API. |
| src/app/shared/tree-utils.ts | Adds shared helpers to create/convert hierarchical tree structures. |
| src/app/shared/tree-utils.spec.ts | Adds unit tests for the new tree utilities. |
| src/app/shared/transfer-progress-card/transfer-progress-card.component.ts | Refactors inputs/outputs/state to signals; updates polling logic and refresh behavior. |
| src/app/shared/transfer-progress-card/transfer-progress-card.component.html | Updates template bindings to signal/computed accessors. |
| src/app/repo.lookup.service.ts | Changes options API return type to hierarchical select items. |
| src/app/plugin.service.ts | Makes plugin config reactive via signals/computeds and introduces defaults. |
| src/app/models/hierarchical-select-item.ts | Adds a typed hierarchical select item model for tree responses. |
| src/app/metadatafield/metadatafield.component.ts | Converts to signals/computeds; introduces changed output + refresh trigger pattern. |
| src/app/metadatafield/metadatafield.component.spec.ts | Updates tests for new signal/computed API and changed output. |
| src/app/metadatafield/metadatafield.component.html | Updates bindings to new computed accessors. |
| src/app/metadata-selector/metadata-selector.component.ts | Refactors to signals and effects; adjusts metadata loading/building pipeline. |
| src/app/metadata-selector/metadata-selector.component.spec.ts | Updates tests for signal-based state and submit behavior. |
| src/app/metadata-selector/metadata-selector.component.html | Updates tree table bindings and adds refresh trigger + changed event wiring. |
| src/app/metadata-selector/metadata-selector-styling.spec.ts | Updates styling test to use new hostStyle() API. |
| src/app/executablefile/executablefile.component.ts | Migrates to OnPush + signals for compute queue selection and UI state. |
| src/app/executablefile/executablefile.component.spec.ts | Updates tests for signal state and computed accessors. |
| src/app/executablefile/executablefile.component.html | Updates bindings for signal-driven form controls. |
| src/app/downloadablefile/downladablefile.component.ts | Migrates to signals/computeds; adds changed output and trigger input. |
| src/app/downloadablefile/downladablefile.component.spec.ts | Updates tests for new action/style APIs and changed output. |
| src/app/downloadablefile/downladablefile.component.html | Updates bindings to computed accessors. |
| src/app/download/download.component.html | Updates dialog/forms bindings to signals for zoneless compatibility. |
| src/app/ddi-cdi/ddi-cdi.component.html | Updates form and conditional bindings to signals. |
| src/app/dataset.service.ts | Renames request field collectionId → collection. |
| src/app/dataset.service.spec.ts | Updates test to assert the renamed request field. |
| src/app/datafile/datafile.component.ts | Converts to signals/computeds; adds trigger + changed output; refactors icons. |
| src/app/datafile/datafile.component.spec.ts | Updates tests to use setInput and new computed APIs. |
| src/app/datafile/datafile.component.html | Updates bindings to computed icons/colors and action accessor. |
| src/app/datafile/datafile-styling.spec.ts | Updates styling test to use new hostStyle() API. |
| src/app/data.updates.service.ts | Reads dataverse token via credentials signal getter. |
| src/app/data.updates.service.spec.ts | Updates tests to use new credentials service mutation API. |
| src/app/data.state.service.ts | Replaces BehaviorSubject state with signal-based state API. |
| src/app/data.state.service.spec.ts | Updates tests to use state$() instead of getCurrentValue(). |
| src/app/data.service.ts | Reads all request fields via credentials signal getters. |
| src/app/data.service.spec.ts | Updates tests to use setCredentials() API. |
| src/app/credentials.service.ts | Replaces mutable credentials with a signal + computed property getters. |
| src/app/connect/connect.component.spec.ts | Updates connect tests for signals + plugin service signal stubs. |
| src/app/connect/connect.component.config.spec.ts | Updates config tests for signal-based component API. |
| src/app/connect/connect.component.behavior.spec.ts | Updates behavior tests for signals and removes noop-animations provider usage. |
| src/app/connect/connect.component.advanced.spec.ts | Updates advanced tests for signals and revised selection semantics. |
| src/app/connect/connect-compare.integration.spec.ts | Updates integration test stubs to include signal-based APIs. |
| src/app/compute/compute.component.ts | Migrates compute page state to signals/computeds and updates async flows. |
| src/app/compute/compute.component.spec.ts | Updates compute tests for new signals and plugin service signal stubs. |
| src/app/compute/compute.component.html | Updates bindings to signal-based state. |
| src/app/compare/compare.component.ts | Refactors compare page state/filters to signals/computeds and updates polling/refresh. |
| src/app/compare/compare.component.html | Updates bindings for signals, filtering selection, and child refresh trigger wiring. |
| src/app/app.component.ts | Sets OnPush strategy to align with signal/zoneless patterns. |
| src/app/app.component.spec.ts | Adds/updates tests around redirect loop detection and navigation fallback flows. |
| package.json | Upgrades Angular/PrimeNG ecosystem deps; removes Zone.js from runtime deps and keeps it for dev/test. |
| karma.conf.js | Minor quoting/style adjustment for CHROME_BIN assignment. |
| angular.json | Removes app polyfills file; adjusts build/test polyfills for localize + test Zone setup. |
| Makefile | Removes test-watch; updates CI target to call lint. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/app/shared/transfer-progress-card/transfer-progress-card.component.ts
Show resolved
Hide resolved
Auto-detect Chrome/Chromium binary path across distros instead of hardcoding /usr/bin/chromium (Arch only). Checks common paths: chromium, chromium-browser, google-chrome-stable, google-chrome.
Code Review Agent (Python)\nNo Python files changed. Skipping analysis. |
AI Governance checks failedPlease fix the following before re-running checks:
Helpful links:
After edits, push updates or re-run the workflow to validate. |
…fig.json: set module to ES2022, lib to [ES2022, dom],\n enable useDefineForClassFields for spec compliance\n- navigation.service.ts: modernize DI from constructor @Inject to\n field-level inject(DOCUMENT)\n- compare.component.ts: move side effects from computed() into\n effect() to avoid non-idempotent computed signals\n- Subscription tracking: add ngOnDestroy cleanup with subscription\n Set in ddi-cdi, compute, metadata-selector, download components\n- Fix TDZ errors from useDefineForClassFields: change const to let\n with separate declaration/assignment for all subscription variables\n that self-reference in synchronous callbacks\n- Add optional chaining (?.) to all .unsubscribe() calls to handle\n synchronous emission edge case where subscription variable is\n still undefined when the callback fires\n\nAll 543 tests pass.
Code Review Agent (Python)\nNo Python files changed. Skipping analysis. |
AI Governance checks failedPlease fix the following before re-running checks:
Helpful links:
After edits, push updates or re-run the workflow to validate. |
- Updated subscription declarations in multiple components to avoid temporal dead zone (TDZ) issues by splitting declaration and assignment. - Added eslint-disable comments for clarity on the changes made.
AI Governance checks failedPlease fix the following before re-running checks:
Helpful links:
After edits, push updates or re-run the workflow to validate. |
Code Review Agent (Python)\nNo Python files changed. Skipping analysis. |
AI Governance checks failedPlease fix the following before re-running checks:
Helpful links:
After edits, push updates or re-run the workflow to validate. |
Code Review Agent (Python)\nNo Python files changed. Skipping analysis. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Key changes:
@AI-Tool: Copilot
Summary
AI Provenance (required for AI-assisted changes)
Compliance checklist
Change-type specifics
Tests & Risk