Skip to content

Migrate to Angular 20, TypeScript 5.9, and Angular Material 20#11657

Open
DenysVuika wants to merge 9 commits intodevelopfrom
chore/ng20
Open

Migrate to Angular 20, TypeScript 5.9, and Angular Material 20#11657
DenysVuika wants to merge 9 commits intodevelopfrom
chore/ng20

Conversation

@DenysVuika
Copy link
Copy Markdown
Contributor

@DenysVuika DenysVuika commented Feb 16, 2026

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

Package From To
@angular/core 19.2.18 20.3.9
@angular/material / cdk 19.2.19 20.2.14
typescript 5.8.3 5.9.3
ng-packagr 19.2.2 20.3.2
@angular-devkit/* 19.2.19 20.3.16
@angular-eslint/* 19.3.0 20.7.0
@typescript-eslint/* 6.21.0 8.55.0
nx / @nx/* 22.4.1 22.5.1
storybook / @storybook/* ^10.2.0 10.2.8

Build Verification

All libraries build successfully with Angular 20:

  • ✅ js-api
  • ✅ extensions
  • ✅ core
  • ✅ content-services
  • ✅ process-services
  • ✅ process-services-cloud
  • ✅ insights

Build commands verified:

nx build js-api
nx build extensions
nx build core
nx build content-services
nx build process-services
nx build process-services-cloud
nx build insights

Testing Checklist

  • All library builds pass
  • TypeScript compilation succeeds
  • No breaking API changes detected during build
  • Manual testing of key components (recommended)
  • E2E tests pass (if applicable)
  • Unit tests pass (skipped in this PR for time, recommend running full test suite)

Migration Strategy Used

  1. Used nx migrate @angular/core@20 to generate migration plan
  2. Manually updated remaining packages (Material, ng-packagr, TypeScript)
  3. Installed dependencies with --legacy-peer-deps
  4. Verified all library builds

References

@DenysVuika DenysVuika force-pushed the chore/ng20 branch 3 times, most recently from aadff57 to 1ba6945 Compare February 17, 2026 13:25
@sonarqubecloud
Copy link
Copy Markdown

@DenysVuika DenysVuika marked this pull request as draft February 20, 2026 10:43
@DenysVuika DenysVuika marked this pull request as ready for review March 23, 2026 10:48
Copilot AI review requested due to automatic review settings March 23, 2026 10:48
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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 UserPreferencesService to set direction via Directionality.valueSignal and emit direction changes.
  • Added an .npmrc to force legacy-peer-deps=true during 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.

Comment on lines +138 to +139
this.directionality.valueSignal.set(direction);
this.directionality.change.emit(direction);
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

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

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).

Copilot generated this review using guidance from repository custom instructions.
@Alfresco Alfresco deleted a comment from sonarqubecloud bot Mar 23, 2026
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
@sonarqubecloud
Copy link
Copy Markdown

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants