Migrate to Angular 20, TypeScript 5.9, and Angular Material 20#11657
Migrate to Angular 20, TypeScript 5.9, and Angular Material 20#11657DenysVuika wants to merge 9 commits intodevelopfrom
Conversation
aadff57 to
1ba6945
Compare
|
There was a problem hiding this comment.
Pull request overview
Migrates the Nx monorepo toolchain and dependencies from Angular 19 to Angular 20 (plus TypeScript 5.9), with minor code adjustments for updated Angular/CDK APIs and install configuration.
Changes:
- Updated Angular, Angular Material/CDK, TypeScript, Nx, Storybook, and related tooling versions in
package.json. - Updated
UserPreferencesServiceto set direction viaDirectionality.valueSignaland emit direction changes. - Added an
.npmrcto forcelegacy-peer-deps=trueduring installs.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| package.json | Bumps Angular/Material/TS/Nx/Storybook versions; adjusts tooling dependencies and overrides. |
| lib/core/src/lib/common/services/user-preferences.service.ts | Updates directionality propagation to the Angular 20/CDK API (valueSignal + change.emit). |
| .npmrc | Forces npm to use legacy peer dependency resolution. |
| this.directionality.valueSignal.set(direction); | ||
| this.directionality.change.emit(direction); |
There was a problem hiding this comment.
This change adds new behavior (mutating Directionality via valueSignal.set(...) and emitting change) but the existing unit tests only assert the dir attribute on the document. Please extend user-preferences.service.spec.ts to cover the Directionality update (e.g., verify the injected Directionality reflects the new direction and that change emits once).
chore: migrate to Angular 20, TypeScript 5.9, and supporting packages This commit migrates the Nx monorepo from Angular 19 to Angular 20 and updates all related dependencies to their compatible versions. - @angular/core: 19.2.18 → 20.3.9 - @angular/material: 19.2.19 → 20.2.14 - @angular/cdk: 19.2.19 → 20.2.14 - @angular/material-date-fns-adapter: 19.2.19 → 20.2.14 - typescript: 5.8.3 → 5.9.3 - ng-packagr: 19.2.2 → 20.3.2 - @angular-devkit/build-angular: 19.2.19 → 20.3.16 - @angular-devkit/architect: 0.1902.19 → 0.2003.16 - @angular-devkit/core: 19.2.19 → 20.3.16 - @angular-devkit/schematics: 19.2.19 → 20.3.16 - @schematics/angular: 19.2.7 → 20.3.16 - @angular-eslint/eslint-plugin: 19.3.0 → 20.7.0 - @angular-eslint/eslint-plugin-template: 19.3.0 → 20.7.0 - @angular-eslint/template-parser: 19.3.0 → 20.7.0 - @typescript-eslint/eslint-plugin: 6.21.0 → 8.55.0 - @typescript-eslint/parser: 6.21.0 → 8.55.0 - @typescript-eslint/typescript-estree: 8.41.0 → 8.55.0 - @typescript-eslint/utils: ^8.51.0 → 8.55.0 - nx: 22.4.1 → 22.5.1 - @nx/angular: 22.1.3 → 22.5.1 - @nx/eslint-plugin: 22.3.3 → 22.5.1 - @nx/js: 22.1.3 → 22.5.1 - @nx/node: 22.1.3 → 22.5.1 - @nx/storybook: ^20.8.4 → 22.5.1 - @nx/workspace: 22.4.5 → 22.5.1 - @nx/webpack: 22.3.3 → 22.5.1 - storybook: ^10.2.0 → 10.2.8 - @storybook/angular: ^10.2.0 → 10.2.8 - @storybook/addon-themes: ^10.2.0 → 10.2.8 1. **PortalInjector Removal (Angular CDK 20)** - Replaced PortalInjector usage with Injector.create() - Updated context-menu-overlay.service.ts to use new API 2. **ESLint Configuration** - Removed deprecated @typescript-eslint/brace-style rule - This rule was removed in @typescript-eslint v8 All libraries build successfully: - ✅ js-api - ✅ extensions - ✅ core - ✅ content-services - ✅ process-services - ✅ process-services-cloud - ✅ insights Dependencies were installed using npm install --legacy-peer-deps due to peer dependency conflicts with @mat-datetimepicker/core which requires Angular CDK ^19.0.0 but we are using 20.2.14. - ESLint warnings about @angular-eslint/prefer-inject are expected - this is a new recommendation in Angular 20 to use inject() function instead of constructor injection. These can be addressed in a follow-up PR. chore: migrate to Angular 20, TypeScript 5.9, and supporting packages This commit migrates the Nx monorepo from Angular 19 to Angular 20 and updates all related dependencies to their compatible versions. - @angular/core: 19.2.18 → 20.3.9 - @angular/material: 19.2.19 → 20.2.14 - @angular/cdk: 19.2.19 → 20.2.14 - @angular/material-date-fns-adapter: 19.2.19 → 20.2.14 - typescript: 5.8.3 → 5.9.3 - ng-packagr: 19.2.2 → 20.3.2 - @angular-devkit/build-angular: 19.2.19 → 20.3.16 - @angular-devkit/architect: 0.1902.19 → 0.2003.16 - @angular-devkit/core: 19.2.19 → 20.3.16 - @angular-devkit/schematics: 19.2.19 → 20.3.16 - @schematics/angular: 19.2.7 → 20.3.16 - @angular-eslint/eslint-plugin: 19.3.0 → 20.7.0 - @angular-eslint/eslint-plugin-template: 19.3.0 → 20.7.0 - @angular-eslint/template-parser: 19.3.0 → 20.7.0 - @typescript-eslint/eslint-plugin: 6.21.0 → 8.55.0 - @typescript-eslint/parser: 6.21.0 → 8.55.0 - @typescript-eslint/typescript-estree: 8.41.0 → 8.55.0 - @typescript-eslint/utils: ^8.51.0 → 8.55.0 - nx: 22.4.1 → 22.5.1 - @nx/angular: 22.1.3 → 22.5.1 - @nx/eslint-plugin: 22.3.3 → 22.5.1 - @nx/js: 22.1.3 → 22.5.1 - @nx/node: 22.1.3 → 22.5.1 - @nx/storybook: ^20.8.4 → 22.5.1 - @nx/workspace: 22.4.5 → 22.5.1 - @nx/webpack: 22.3.3 → 22.5.1 - storybook: ^10.2.0 → 10.2.8 - @storybook/angular: ^10.2.0 → 10.2.8 - @storybook/addon-themes: ^10.2.0 → 10.2.8 1. **PortalInjector Removal (Angular CDK 20)** - Replaced PortalInjector usage with Injector.create() - Updated context-menu-overlay.service.ts to use new API 2. **ESLint Configuration** - Removed deprecated @typescript-eslint/brace-style rule - This rule was removed in @typescript-eslint v8 All libraries build successfully: - ✅ js-api - ✅ extensions - ✅ core - ✅ content-services - ✅ process-services - ✅ process-services-cloud - ✅ insights Dependencies were installed using npm install --legacy-peer-deps due to peer dependency conflicts with @mat-datetimepicker/core which requires Angular CDK ^19.0.0 but we are using 20.2.14. - ESLint warnings about @angular-eslint/prefer-inject are expected - this is a new recommendation in Angular 20 to use inject() function instead of constructor injection. These can be addressed in a follow-up PR. To fix these automatically, run: ng generate @angular/core:inject --path=lib fix: resolve peer dependency conflicts for CI/CD - Update @mat-datetimepicker/core from 15.0.2 to 16.0.1 (supports Angular 20) - Update webpack override to 5.104.1 for consistency - Add .npmrc with legacy-peer-deps=true for npm ci compatibility - Fixes npm ci failures in CI/CD pipeline fix: update webpack to 5.105.0 for Storybook compatibility - Align webpack version with @angular-devkit/build-angular bundled version - Fixes Storybook compilation error with webpack instance mismatch - Removes unnecessary webpack overrides chore: finalize Angular 20 migration and improve migration prompt - Marked all migration tasks as completed in the migration plan. - Added a comprehensive summary of the migration process, including phases, completed tasks, and known issues. - Introduced an improved migration prompt that addresses critical considerations and provides a detailed migration strategy for Angular 20 and related packages. fix: update migration prompt and tests for Angular 20 breaking changes - Enhanced migration prompt with specific instructions for handling Angular CDK Directionality API changes and removal of ng-reflect-* attributes. - Updated unit tests to replace deprecated ng-reflect-* attribute checks with appropriate Angular testing patterns. - Adjusted user preferences service to utilize the new directionality API method for setting text direction. fix: enhance ImgViewerComponent to handle cleanup and prevent errors after destruction - Added a `destroyed` flag to manage component lifecycle and prevent operations on a destroyed instance. - Implemented `afterEach` hooks in tests to ensure proper fixture cleanup. - Updated key event handlers and methods to check for the `destroyed` state before executing actions, improving stability and preventing errors. feat: update ESLint configuration to include @angular-eslint/prefer-inject rule - Added the @angular-eslint/prefer-inject rule to .eslintrc.json files in content-services, process-services, and process-services-cloud, promoting the use of the inject() function for dependency injection. - Made minor adjustments to comments in search-logical-filter.component.ts for clarity. chore: update ESLint configuration to include @angular-eslint/prefer-inject rule - Added the @angular-eslint/prefer-inject rule to .eslintrc.json files in extensions, insights, and js-api, promoting the use of the inject() function for dependency injection. - Removed unnecessary eslint-disable comments in process-list-cloud.component.ts and base-task-list-cloud.component.ts for cleaner code. remove unnecessary changes remove useless changes cleanup useless changes remove useless changes Update package.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> chore: update version of @ngx-translate/core to 17.0.0 in package.json and package-lock.json Update package.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update package.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update .npmrc Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> chore: upgrade apollo-angular and jest packages to support Angular 20 - Upgrade apollo-angular from 10.0.3 to 13.0.0 - Upgrade @apollo/client from 3.13.1 to ^4.0.1 - Upgrade jest packages to v30 (jest, jest-environment-jsdom) - Upgrade jest-preset-angular from 14.4.2 to 16.1.1 - Add overrides for Angular 20 peer dependency compatibility chore: downgrade @apollo/client and apollo-angular to compatible versions chore: downgrade @apollo/client and apollo-angular to compatible versions chore: remove unused configuration options from jest and tsconfig chore: refactor window.location mock in oauth2 tests for improved clarity and functionality chore: enhance oauth2Auth tests and improve hash handling logic chore: remove @typescript-eslint/brace-style rule from ESLint configuration chore: add prefer-optional-chain rule to ESLint configuration chore: update ESLint rules for optional chaining and refactor type definitions chore: refactor tests to use TestBed for dependency injection in FileViewer and ProcessFormRendering services chore: update AttachFileWidgetComponent to ensure early return after download chore: update AttachFileWidgetComponent to ensure early return after download chore: update unselectFacetBucket method to use optional chaining for safer property access
|



Summary
This PR migrates the Alfresco Nx monorepo from Angular 19 to Angular 20, including updates to Angular Material, TypeScript, ng-packagr, and all related tooling.
Version Updates
@angular/core@angular/material/cdktypescriptng-packagr@angular-devkit/*@angular-eslint/*@typescript-eslint/*nx/@nx/*storybook/@storybook/*Build Verification
All libraries build successfully with Angular 20:
Build commands verified:
Testing Checklist
Migration Strategy Used
nx migrate @angular/core@20to generate migration plan--legacy-peer-depsReferences