Angular 14 upgrade (#2598)

* angular 14 * material 14 and ADF 14 * latest ADF 5.x and theme import fixes * use latest ADF 5.x * update build command * update travis command * upgrade ngrx to v14 * upgrade flex layout lib * fix after rebase * fix after rebase * upgrade to latest ADF
2025-05-12 17:04:46 +00:00 · 2022-08-25 12:05:00 +01:00 · 2022-08-25 12:05:00 +01:00 · 69cb107dd9
commit 69cb107dd9
parent c60a3b51cf
23 changed files with 1825 additions and 1946 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -66,7 +66,7 @@ jobs:
    - stage: Quality and Unit tests
      name: 'Build (without animation)'
      before_script: npx @alfresco/adf-cli update-commit-sha --pointer "HEAD" --pathPackage "$(pwd)"
-      script: npm ci && npm run build -- --prod --configuration=e2e
+      script: npm ci && npm run build -- --configuration=production,e2e
      after_success: ./scripts/ci/utils/artifact-to-s3.sh -a $CONTENT_CE_DIST_PATH -o "$S3_DBP_FOLDER/alfresco-content-app.tar.bz2" || travis_terminate 1
      cache: false

--- a/angular.json
+++ b/angular.json
@ -19,7 +19,19 @@
            "allowedCommonJsDependencies": [
              "moment-es6",
              "minimatch",
-              "zen-observable"
+              "zen-observable",
+              "moment",
+              "@editorjs/code",
+              "@editorjs/editorjs",
+              "@editorjs/header",
+              "@editorjs/inline-code",
+              "@editorjs/list",
+              "@editorjs/marker",
+              "@editorjs/underline",
+              "@quanzo/change-font-size",
+              "cropperjs",
+              "editorjs-html",
+              "editorjs-text-color-plugin"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
@ -540,7 +552,6 @@
      }
    }
  },
-  "defaultProject": "content-ce",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "aca",
--- a/app/src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
+++ b/app/src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
@ -24,7 +24,7 @@
 */

 import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
-import { FormGroup, FormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
 import { QueriesApi, SiteEntry, SitePaging } from '@alfresco/js-api';
 import { Store } from '@ngrx/store';
 import { AppStore, UpdateLibraryAction } from '@alfresco/aca-shared/store';
@ -34,7 +34,7 @@ import { Observable, from, Subject } from 'rxjs';
 import { ErrorStateMatcher } from '@angular/material/core';

 export class InstantErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
@ -63,11 +63,11 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
    { value: 'MODERATED', label: 'LIBRARY.VISIBILITY.MODERATED' }
  ];

-  form: FormGroup = new FormGroup({
-    id: new FormControl({ value: '', disabled: true }),
-    title: new FormControl({ value: '' }, [Validators.required, Validators.maxLength(256)]),
-    description: new FormControl({ value: '' }, [Validators.maxLength(512)]),
-    visibility: new FormControl(this.libraryType[0].value)
+  form: UntypedFormGroup = new UntypedFormGroup({
+    id: new UntypedFormControl({ value: '', disabled: true }),
+    title: new UntypedFormControl({ value: '' }, [Validators.required, Validators.maxLength(256)]),
+    description: new UntypedFormControl({ value: '' }, [Validators.maxLength(512)]),
+    visibility: new UntypedFormControl(this.libraryType[0].value)
  });

  matcher = new InstantErrorStateMatcher();
--- a/app/src/app/components/node-version/node-version-form.component.ts
+++ b/app/src/app/components/node-version/node-version-form.component.ts
@ -24,7 +24,7 @@
 */

 import { Component, OnDestroy, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@ -44,7 +44,7 @@ export interface VersionFormEntry {
 export class AppNodeVersionFormComponent implements OnInit, OnDestroy {
  @Output() update: EventEmitter<VersionFormEntry> = new EventEmitter();

-  form: FormGroup;
+  form: UntypedFormGroup;

  private onDestroy$: Subject<boolean> = new Subject<boolean>();
  private versionOptions = [
@ -52,7 +52,7 @@ export class AppNodeVersionFormComponent implements OnInit, OnDestroy {
    { label: 'VERSION.FORM.VERSION.MAJOR', value: true }
  ];

-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: UntypedFormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
--- a/app/src/app/dialogs/node-template/create-from-template.dialog.ts
+++ b/app/src/app/dialogs/node-template/create-from-template.dialog.ts
@ -26,7 +26,7 @@
 import { Component, ViewEncapsulation, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Node } from '@alfresco/js-api';
-import { FormBuilder, FormGroup, Validators, FormControl, ValidationErrors } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormControl, ValidationErrors } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppStore, CreateFromTemplate } from '@alfresco/aca-shared/store';
 import { TranslationService } from '@alfresco/adf-core';
@ -37,12 +37,12 @@ import { TranslationService } from '@alfresco/adf-core';
  encapsulation: ViewEncapsulation.None
 })
 export class CreateFromTemplateDialogComponent implements OnInit {
-  public form: FormGroup;
+  public form: UntypedFormGroup;

  constructor(
    private translationService: TranslationService,
    private store: Store<AppStore>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private dialogRef: MatDialogRef<CreateFromTemplateDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Node
  ) {}
@ -79,7 +79,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
    this.dialogRef.close();
  }

-  private forbidSpecialCharacters({ value }: FormControl): ValidationErrors | null {
+  private forbidSpecialCharacters({ value }: UntypedFormControl): ValidationErrors | null {
    const specialCharacters = /([\*\"\<\>\\\/\?\:\|])/;
    const isValid = !specialCharacters.test(value);

@ -90,7 +90,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
        };
  }

-  private forbidEndingDot({ value }: FormControl): ValidationErrors | null {
+  private forbidEndingDot({ value }: UntypedFormControl): ValidationErrors | null {
    const isValid: boolean = (value || '').trim().split('').pop() !== '.';

    return isValid
@ -100,7 +100,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
        };
  }

-  private forbidOnlySpaces({ value }: FormControl): ValidationErrors | null {
+  private forbidOnlySpaces({ value }: UntypedFormControl): ValidationErrors | null {
    if (value.length) {
      const isValid = !!(value || '').trim();

--- a/app/src/app/store/app-store.module.ts
+++ b/app/src/app/store/app-store.module.ts
@ -26,7 +26,7 @@
 import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { appReducer } from './reducers/app.reducer';
-import { StoreRouterConnectingModule, DefaultRouterStateSerializer } from '@ngrx/router-store';
+import { StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { EffectsModule } from '@ngrx/effects';
 import { environment } from '../../environments/environment';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@ -58,7 +58,7 @@ import { INITIAL_STATE } from './initial-state';
      }
    ),
    StoreRouterConnectingModule.forRoot({
-      serializer: DefaultRouterStateSerializer,
+      serializer: FullRouterStateSerializer,
      stateKey: 'router'
    }),
    SharedStoreModule,
--- a/app/src/styles.scss
+++ b/app/src/styles.scss
@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
+@import '~@alfresco/adf-core/lib/prebuilt-themes/adf-blue-orange.css';
@import 'app/ui/application';
@import './app/ui/variables/font-family';

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,7 +12,7 @@
    "start": "ng serve",
    "start:prod": "npm run validate-app-config && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng serve --configuration production --open",
    "prebuild": "mkdir -p ./app/.tmp && cp ./app/src/app.config.json.tpl ./app/.tmp/app.config.json",
-    "build": "ng build",
+    "build": "ng build content-ce",
    "build.release": "npm run build -- --configuration=production,release",
    "test": "ng test",
    "test:ci": "ng test adf-office-services-ext && ng test content-ce --code-coverage",
@ -25,28 +25,28 @@
  },
  "private": true,
  "dependencies": {
-    "@alfresco/adf-content-services": "5.0.0-angular.13.2-36043",
-    "@alfresco/adf-core": "5.0.0-angular.13.2-36043",
-    "@alfresco/adf-extensions": "5.0.0-angular.13.2-36043",
+    "@alfresco/adf-content-services": "5.0.0-angular.14-36080",
+    "@alfresco/adf-core": "5.0.0-angular.14-36080",
+    "@alfresco/adf-extensions": "5.0.0-angular.14-36080",
    "@alfresco/js-api": "4.12.0-244",
-    "@angular/animations": "13.3.1",
-    "@angular/cdk": "13.3.9",
-    "@angular/common": "13.3.11",
-    "@angular/compiler": "13.3.1",
-    "@angular/core": "13.3.11",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "13.3.11",
-    "@angular/material": "13.3.9",
-    "@angular/material-moment-adapter": "13.3.9",
-    "@angular/platform-browser": "13.3.11",
-    "@angular/platform-browser-dynamic": "13.3.11",
-    "@angular/router": "13.3.11",
+    "@angular/animations": "14.1.2",
+    "@angular/cdk": "14.1.2",
+    "@angular/common": "14.1.2",
+    "@angular/compiler": "14.1.2",
+    "@angular/core": "14.1.2",
+    "@angular/flex-layout": "^14.0.0-beta.40",
+    "@angular/forms": "14.1.2",
+    "@angular/material": "14.1.2",
+    "@angular/material-moment-adapter": "14.1.2",
+    "@angular/platform-browser": "14.1.2",
+    "@angular/platform-browser-dynamic": "14.1.2",
+    "@angular/router": "14.1.2",
    "@mat-datetimepicker/core": "^9.0.68",
    "@mat-datetimepicker/moment": "^9.0.68",
-    "@ngrx/effects": "^13.1.0",
-    "@ngrx/router-store": "^13.1.0",
-    "@ngrx/store": "^13.1.0",
-    "@ngrx/store-devtools": "^13.1.0",
+    "@ngrx/effects": "^14.2.0",
+    "@ngrx/router-store": "^14.2.0",
+    "@ngrx/store": "^14.2.0",
+    "@ngrx/store-devtools": "^14.2.0",
    "@ngx-translate/core": "^14.0.0",
    "minimatch-browser": "^1.0.0",
    "moment": "^2.29.4",
@ -60,15 +60,15 @@
    "@alfresco/adf-cli": "5.0.0-angular.13.2-36043",
    "@alfresco/adf-testing": "5.0.0-angular.13.2-36043",
    "@angular-custom-builders/lite-serve": "^0.2.3",
-    "@angular-devkit/build-angular": "13.3.9",
+    "@angular-devkit/build-angular": "14.1.2",
    "@angular-eslint/builder": "^13.2.0",
    "@angular-eslint/eslint-plugin": "^13.2.0",
    "@angular-eslint/eslint-plugin-template": "^13.2.0",
    "@angular-eslint/schematics": "13.2.0",
    "@angular-eslint/template-parser": "^13.2.0",
-    "@angular/cli": "13.3.9",
-    "@angular/compiler-cli": "13.3.11",
-    "@angular/language-service": "13.3.11",
+    "@angular/cli": "14.1.2",
+    "@angular/compiler-cli": "14.1.2",
+    "@angular/language-service": "14.1.2",
    "@types/event-emitter": "^0.3.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
@ -107,7 +107,7 @@
    "karma-mocha-reporter": "^2.2.5",
    "lint-staged": "^12.3.1",
    "lite-server": "^2.4.0",
-    "ng-packagr": "^13.3.0",
+    "ng-packagr": "^14.1.0",
    "node-stream-zip": "^1.14.0",
    "prettier": "2.5.1",
    "protractor": "~7.0.0",
--- a/projects/aca-about/tsconfig.lib.json
+++ b/projects/aca-about/tsconfig.lib.json
@ -4,7 +4,7 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declarationMap": true,
-    "target": "es2015",
+    "target": "es2020",
    "declaration": true,
    "inlineSources": true,
    "types": [],
--- a/projects/aca-folder-rules/src/lib/rule-details/conditions/rule-composite-condition.ui-component.ts
+++ b/projects/aca-folder-rules/src/lib/rule-details/conditions/rule-composite-condition.ui-component.ts
@ -66,7 +66,7 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
    this.setDisabledState(isReadOnly);
  }

-  private formSubscription = this.form.valueChanges.subscribe((value) => {
+  private formSubscription = this.form.valueChanges.subscribe((value: any) => {
    this.onChange(value);
    this.onTouch();
  });
--- a/projects/aca-folder-rules/src/lib/rule-details/conditions/rule-simple-condition.ui-component.ts
+++ b/projects/aca-folder-rules/src/lib/rule-details/conditions/rule-simple-condition.ui-component.ts
@ -61,7 +61,7 @@ export class RuleSimpleConditionUiComponent implements ControlValueAccessor, OnD
    this.setDisabledState(isReadOnly);
  }

-  private formSubscription = this.form.valueChanges.subscribe((value) => {
+  private formSubscription = this.form.valueChanges.subscribe((value: any) => {
    this.onChange(value);
    this.onTouch();
  });
--- a/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.ts
+++ b/projects/aca-folder-rules/src/lib/rule-details/rule-details.ui-component.ts
@ -24,7 +24,7 @@
 */

 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { Rule } from '../model/rule.model';
@ -79,27 +79,27 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
  formValueChanged = new EventEmitter<Partial<Rule>>();

  private onDestroy$ = new Subject();
-  form: FormGroup;
+  form: UntypedFormGroup;

-  get name(): FormControl {
-    return this.form.get('name') as FormControl;
+  get name(): UntypedFormControl {
+    return this.form.get('name') as UntypedFormControl;
  }
-  get description(): FormControl {
-    return this.form.get('description') as FormControl;
+  get description(): UntypedFormControl {
+    return this.form.get('description') as UntypedFormControl;
  }
-  get triggers(): FormControl {
-    return this.form.get('triggers') as FormControl;
+  get triggers(): UntypedFormControl {
+    return this.form.get('triggers') as UntypedFormControl;
  }
-  get conditions(): FormControl {
-    return this.form.get('conditions') as FormControl;
+  get conditions(): UntypedFormControl {
+    return this.form.get('conditions') as UntypedFormControl;
  }

  ngOnInit() {
-    this.form = new FormGroup({
-      name: new FormControl(this.value.name || '', Validators.required),
-      description: new FormControl(this.value.description || ''),
-      triggers: new FormControl(this.value.triggers || ['inbound'], Validators.required),
-      conditions: new FormControl(
+    this.form = new UntypedFormGroup({
+      name: new UntypedFormControl(this.value.name || '', Validators.required),
+      description: new UntypedFormControl(this.value.description || ''),
+      triggers: new UntypedFormControl(this.value.triggers || ['inbound'], Validators.required),
+      conditions: new UntypedFormControl(
        this.value.conditions || {
          inverted: false,
          booleanMode: 'and',
--- a/projects/aca-folder-rules/tsconfig.lib.json
+++ b/projects/aca-folder-rules/tsconfig.lib.json
@ -3,7 +3,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
--- a/projects/aca-settings/src/lib/settings.component.ts
+++ b/projects/aca-settings/src/lib/settings.component.ts
@ -25,7 +25,7 @@

 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { AppConfigService, StorageService, OauthConfigModel } from '@alfresco/adf-core';
-import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { Validators, UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppStore, getHeaderColor, getAppName, getUserProfile, SetSettingsParameterAction } from '@alfresco/aca-shared/store';
@ -48,7 +48,7 @@ interface RepositoryConfig {
 export class SettingsComponent implements OnInit {
  private defaultPath = '/assets/images/alfresco-logo-white.svg';

-  form: FormGroup;
+  form: UntypedFormGroup;

  profile$: Observable<ProfileState>;
  appName$: Observable<string>;
@ -63,7 +63,7 @@ export class SettingsComponent implements OnInit {
    private store: Store<AppStore>,
    private appConfig: AppConfigService,
    private storage: StorageService,
-    private fb: FormBuilder
+    private fb: UntypedFormBuilder
  ) {
    this.profile$ = store.select(getUserProfile);
    this.appName$ = store.select(getAppName);
--- a/projects/aca-settings/tsconfig.lib.json
+++ b/projects/aca-settings/tsconfig.lib.json
@ -4,7 +4,7 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declarationMap": true,
-    "target": "es2015",
+    "target": "es2020",
    "declaration": true,
    "inlineSources": true,
    "types": [],
--- a/projects/aca-shared/rules/ng-package.json
+++ b/projects/aca-shared/rules/ng-package.json
@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/projects/aca-shared/rules/package.json
+++ b/projects/aca-shared/rules/package.json
@ -1,7 +0,0 @@
-{
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/public-api.ts"
-    }
-  }
-}
--- a/projects/aca-shared/store/ng-package.json
+++ b/projects/aca-shared/store/ng-package.json
@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/projects/aca-shared/store/package.json
+++ b/projects/aca-shared/store/package.json
@ -1,7 +0,0 @@
-{
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/public-api.ts"
-    }
-  }
-}
--- a/projects/aca-shared/tsconfig.lib.json
+++ b/projects/aca-shared/tsconfig.lib.json
@ -3,7 +3,7 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declarationMap": true,
-    "target": "es2015",
+    "target": "es2020",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
--- a/projects/adf-office-services-ext/tsconfig.lib.json
+++ b/projects/adf-office-services-ext/tsconfig.lib.json
@ -3,7 +3,7 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declarationMap": true,
-    "target": "es2015",
+    "target": "es2020",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,7 +14,7 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
-    "target": "es2015",
+    "target": "es2020",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["node_modules/@types"],