inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* chore: migrate to Angular 20, TypeScript 5.9, and supporting packages

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

* chore: clean up package-lock.json and update webpack version in package.json

* [ACS-11306] Corrected main for eslint-angular

* [ACS-11306] Reverted unwanted change

* [ACS-11306] Fixed importing issue on ACA

* [ACS-11306] Updated node-fetch

* [ACS-11306] Reverted last commit

* [ACS-11306] Fixed rendering issue with pdf viewer

* [ACS-11306] Corrected storybook related versions

* Updating dependencies and fixing conflict

* [ACS-11306] Fixed cannot find name Buffer occurred in ACA

* chore: Updating pnpm lock file

* chore: Fixing ESLint issue

* chore: Upgrading to version 20.3.24 to avoid security issue

* chore: Fixing unit test

* chore: Fixing type and exporting missing model

* chore: Fixing type

* Chore: Migrating to Angular 20.3.25 to mitigate security issues

* Fix after rebase

* Removing unused deps

* Aligning deps

* fix create dialog name field hint (#12007)

---------

Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com>
Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: Grzegorz Jaśkowski <138671284+g-jaskowski@users.noreply.github.com>
This commit is contained in:
Denys Vuika
2026-06-26 10:10:54 +02:00
committed by GitHub
co-authored by Aleksander Sklorz Ehsan Rezaei Grzegorz Jaśkowski
parent 7546aa91a3
commit d2d6696c05
25 changed files with 3659 additions and 2975 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/dialogs/folder/folder.dialog.html
+14 -8
View File
@@ -14,16 +14,22 @@
[formControlName]="'name'"
adf-auto-focus
/>
@if (form.controls['name'].dirty && form.controls['name'].invalid) {
<mat-error>
@if (form.controls['name'].hasError('required')) {
<span>
{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
</span>
}
<mat-hint *ngIf="form.controls['name'].dirty">
<span *ngIf="form.controls['name'].errors?.required">
{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
</span>
@else if (form.controls['name'].hasError('message')) {
<span>
{{ form.controls['name'].errors?.message | translate }}
</span>
}
</mat-error>
}
<span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
{{ form.controls['name'].errors?.message | translate }}
</span>
</mat-hint>
</mat-form-field>
<mat-form-field class="adf-full-width adf-folder-dialog-form-field">
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.spec.ts
+1 -1
View File
@@ -100,7 +100,7 @@ describe('SearchChipListComponent', () => {
});
it('should remove the entry upon remove button click', async () => {
spyOn(searchFacetFiltersService, 'unselectFacetBucket').and.callThrough();
spyOn(searchFacetFiltersService, 'unselectFacetBucket').and.stub();
searchFacetFiltersService.selectedBuckets = [
{
lib/content-services/src/lib/search/services/search-facet-filters.service.ts
+1 -1
View File
@@ -395,7 +395,7 @@ export class SearchFacetFiltersService {
unselectFacetBucket(facetField: FacetField, bucket: FacetFieldBucket) {
if (bucket) {
bucket.checked = false;
this.queryBuilder.removeUserFacetBucket(facetField.field, bucket);
this.queryBuilder.removeUserFacetBucket(facetField?.field, bucket);
this.updateSelectedBuckets();
this.queryBuilder.update();
}
lib/content-services/src/lib/security/public-api.ts
+1
View File
@@ -16,3 +16,4 @@
*/
export * from './services/security-controls-groups-marks-security.service';
export * from './services/models/security-controls-mark-response.interface';
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
+1
View File
@@ -22,6 +22,7 @@
[mimeType]="mimeType"
[nodeMimeType]="nodeMimeType"
[urlFile]="urlFileContent"
[blobFile]="blobFileContent"
[tracks]="tracks"
[readOnly]="readOnly || !canEditNode"
[showToolbarDividers]="showToolbarDividers"
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
+13 -5
View File
@@ -374,13 +374,20 @@ describe('AlfrescoViewerComponent', () => {
expect(component.nodesApi.getNode).toHaveBeenCalledTimes(2);
}));
it('should append version of the file to the file content URL', fakeAsync(() => {
it('should append version of the file to the file content URL', async () => {
const mockBlob = new Blob(['fake pdf content'], { type: 'application/pdf' });
const mockResponse = {
ok: true,
blob: () => Promise.resolve(mockBlob)
} as Response;
spyOn(window, 'fetch').and.returnValue(Promise.resolve(mockResponse));
spyOn(component.nodesApi, 'getNode').and.returnValue(
Promise.resolve(
new NodeEntry({
entry: new Node({
name: 'file1.pdf',
content: new ContentInfo(),
content: new ContentInfo({ mimeType: 'application/pdf' }),
properties: { 'cm:versionLabel': '10' }
})
})
@@ -392,11 +399,12 @@ describe('AlfrescoViewerComponent', () => {
component.showViewer = true;
component.versionId = null;
component.ngOnChanges(getSimpleChanges('id1'));
tick();
await fixture.whenStable();
expect(component.fileName).toBe('file1.pdf');
expect(component.urlFileContent).toContain('/public/alfresco/versions/1/nodes/id1/content?attachment=false&10');
}));
expect(component.blobFileContent).toBe(mockBlob);
});
it('should change display name every time node`s version changes', fakeAsync(() => {
spyOn(component.nodesApi, 'getNode').and.returnValue(
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
+26 -1
View File
@@ -225,6 +225,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
versionEntry: VersionEntry;
urlFileContent: string;
blobFileContent: Blob;
fileName: string;
mimeType: string;
nodeMimeType: string;
@@ -274,6 +275,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
private async onNodeUpdated(node: Node) {
if (node && node.id === this.nodeId) {
this.generateCacheBusterNumber();
this.blobFileContent = null;
await this.setUpNodeFile(node);
}
@@ -298,6 +300,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
private async setupNode() {
try {
this.blobFileContent = null;
this.nodeEntry = await this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] });
if (this.versionId) {
this.versionEntry = await this.versionsApi.getVersion(this.nodeId, this.versionId);
@@ -348,12 +351,34 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
}
} else if (viewerType === 'media') {
this.tracks = await this.renditionService.generateMediaTracksRendition(this.nodeId);
} else if (viewerType === 'pdf') {
try {
const contentUrl = versionData
? this.contentApi.getVersionContentUrl(this.nodeId, versionData.id)
: this.contentApi.getContentUrl(this.nodeId);
// Fetch the content as Blob using fetch API with credentials
const response = await fetch(contentUrl, {
credentials: 'include',
headers: {
'Cache-Control': 'no-cache'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
this.blobFileContent = await response.blob();
urlFileContent = null;
} catch (error) {
console.error('[ADF DEBUG] Failed to fetch PDF as blob, falling back to URL', error);
}
}
this.mimeType = mimeType;
this.nodeMimeType = nodeMimeType;
this.fileName = versionData ? versionData.name : nodeData.name;
this.urlFileContent = urlFileContent + (this.cacheBusterNumber ? '&' + this.cacheBusterNumber : '');
this.urlFileContent = urlFileContent ? urlFileContent + (this.cacheBusterNumber ? '&' + this.cacheBusterNumber : '') : null;
this.sidebarRightTemplateContext.node = nodeData;
this.sidebarLeftTemplateContext.node = nodeData;
}