chore: remove deprecated Angular api (#9516)

lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts

@@ -16,86 +16,75 @@
  */
 
 import {
-  Component,
-  Input,
-  OnInit,
-  OnDestroy,
-  ViewChild,
-  ViewContainerRef,
-  ComponentRef,
-  ComponentFactoryResolver,
-  OnChanges,
-  SimpleChanges,
-  ViewEncapsulation,
-  ChangeDetectionStrategy
+    Component,
+    Input,
+    OnInit,
+    OnDestroy,
+    ViewChild,
+    ViewContainerRef,
+    ComponentRef,
+    OnChanges,
+    SimpleChanges,
+    ViewEncapsulation,
+    ChangeDetectionStrategy
 } from '@angular/core';
 import { ExtensionService } from '../../services/extension.service';
 
 @Component({
-  selector: 'adf-dynamic-column',
-  template: `
-    <ng-container #content></ng-container>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'adf-dynamic-column' },
-  styles: [
-    `
-      .adf-dynamic-column {
-        display: flex;
-        align-items: center;
-        width: inherit;
-      }
-    `
-  ]
+    selector: 'adf-dynamic-column',
+    template: ` <ng-container #content></ng-container> `,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-dynamic-column' },
+    styles: [
+        `
+            .adf-dynamic-column {
+                display: flex;
+                align-items: center;
+                width: inherit;
+            }
+        `
+    ]
 })
 export class DynamicColumnComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('content', { read: ViewContainerRef, static: true })
-  content: ViewContainerRef;
+    @ViewChild('content', { read: ViewContainerRef, static: true })
+    content: ViewContainerRef;
 
-  @Input()
-  id: string;
+    @Input()
+    id: string;
 
-  @Input()
-  context: any;
+    @Input()
+    context: any;
 
-  private componentRef: ComponentRef<any>;
+    private componentRef: ComponentRef<any>;
 
-  constructor(
-    private extensions: ExtensionService,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
+    constructor(private extensions: ExtensionService) {}
 
-  ngOnInit() {
-    const componentType = this.extensions.getComponentById(this.id);
-    if (componentType) {
-      const factory = this.componentFactoryResolver.resolveComponentFactory(
-        componentType
-      );
-      if (factory) {
-        this.content.clear();
-        this.componentRef = this.content.createComponent(factory, 0);
-        this.updateInstance();
-      }
+    ngOnInit() {
+        const componentType = this.extensions.getComponentById(this.id);
+        if (componentType) {
+            this.content.clear();
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
+            this.updateInstance();
+        }
     }
-  }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.node) {
-      this.updateInstance();
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.node) {
+            this.updateInstance();
+        }
     }
-  }
 
-  ngOnDestroy() {
-    if (this.componentRef) {
-      this.componentRef.destroy();
-      this.componentRef = null;
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
     }
-  }
 
-  private updateInstance() {
-    if (this.componentRef?.instance) {
-      this.componentRef.instance.context = this.context;
+    private updateInstance() {
+        if (this.componentRef?.instance) {
+            this.componentRef.instance.context = this.context;
+        }
     }
-  }
 }

lib/extensions/src/lib/components/dynamic-component/dynamic.component.spec.ts

@@ -17,13 +17,7 @@
 
 /* eslint-disable @angular-eslint/component-selector */
 
-import {
-    Component,
-    Input,
-    OnChanges,
-    SimpleChange,
-    ComponentFactoryResolver
-} from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DynamicExtensionComponent } from './dynamic.component';
@@ -44,11 +38,9 @@ export class TestComponent implements OnChanges {
 }
 
 describe('DynamicExtensionComponent', () => {
-
     let fixture: ComponentFixture<DynamicExtensionComponent>;
     let componentRegister: ComponentRegisterService;
     let component: DynamicExtensionComponent;
-    let componentFactoryResolver: ComponentFactoryResolver;
 
     beforeEach(() => {
         componentRegister = new ComponentRegisterService();
@@ -64,11 +56,8 @@ describe('DynamicExtensionComponent', () => {
     });
 
     describe('Sub-component creation', () => {
-
         beforeEach(() => {
             fixture = TestBed.createComponent(DynamicExtensionComponent);
-            componentFactoryResolver = TestBed.inject(ComponentFactoryResolver);
-            spyOn(componentFactoryResolver, 'resolveComponentFactory').and.callThrough();
             component = fixture.componentInstance;
             component.id = 'test-component';
             component.data = { foo: 'bar' };
@@ -87,22 +76,13 @@ describe('DynamicExtensionComponent', () => {
             expect(innerElement).not.toBeNull();
         });
 
-        it('should load the TestComponent only ONCE', () => {
-            component.ngOnChanges({});
-            fixture.detectChanges();
-            component.ngOnChanges({});
-            fixture.detectChanges();
-
-            expect((componentFactoryResolver.resolveComponentFactory as any).calls.count()).toBe(1);
-        });
-
         it('should pass through the data', () => {
             const testComponent = fixture.debugElement.query(By.css('test-component')).componentInstance;
 
             expect(testComponent.data).toBe(component.data);
         });
 
-        it('should update the subcomponent\'s input parameters', () => {
+        it('should update the subcomponent input parameters', () => {
             const data = { foo: 'baz' };
 
             component.ngOnChanges({ data: new SimpleChange(component.data, data, false) });
@@ -113,7 +93,6 @@ describe('DynamicExtensionComponent', () => {
     });
 
     describe('Angular life-cycle methods in sub-component', () => {
-
         let testComponent;
 
         beforeEach(() => {

lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts

@@ -15,17 +15,7 @@
  * limitations under the License.
  */
 
-import {
-    Component,
-    Input,
-    ComponentRef,
-    ComponentFactoryResolver,
-    ViewChild,
-    ViewContainerRef,
-    OnDestroy,
-    OnChanges,
-    SimpleChanges
-} from '@angular/core';
+import { Component, Input, ComponentRef, ViewChild, ViewContainerRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { ExtensionService } from '../../services/extension.service';
 import { ExtensionComponent } from '../../services/component-register.service';
 
@@ -47,7 +37,7 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy {
     private componentRef: ComponentRef<ExtensionComponent>;
     private loaded: boolean = false;
 
-    constructor(private extensions: ExtensionService, private componentFactoryResolver: ComponentFactoryResolver) {}
+    constructor(private extensions: ExtensionService) {}
 
     ngOnChanges(changes: SimpleChanges) {
         if (!this.loaded) {
@@ -73,13 +63,8 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy {
     private loadComponent() {
         const componentType = this.extensions.getComponentById<ExtensionComponent>(this.id);
         if (componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(
-                componentType
-            );
-            if (factory) {
-                this.content.clear();
-                this.componentRef = this.content.createComponent(factory, 0);
-            }
+            this.content.clear();
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
         }
     }
 
@@ -97,7 +82,7 @@ export class DynamicExtensionComponent implements OnChanges, OnDestroy {
     }
 
     private componentCreated(): boolean {
-        return !!this.componentRef  && !!this.componentRef.instance;
+        return !!this.componentRef && !!this.componentRef.instance;
     }
 
     private lifecycleHookIsImplemented(lifecycleMethod: string): boolean {

lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts

@@ -15,18 +15,7 @@
  * limitations under the License.
  */
 
-import {
-    Component,
-    Input,
-    OnInit,
-    OnDestroy,
-    ViewChild,
-    ViewContainerRef,
-    ComponentRef,
-    ComponentFactoryResolver,
-    OnChanges,
-    SimpleChanges
-} from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ViewChild, ViewContainerRef, ComponentRef, OnChanges, SimpleChanges } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { ExtensionService } from '../../services/extension.service';
 
@@ -47,22 +36,14 @@ export class DynamicTabComponent implements OnInit, OnChanges, OnDestroy {
 
     private componentRef: ComponentRef<any>;
 
-    constructor(
-        private extensions: ExtensionService,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
+    constructor(private extensions: ExtensionService) {}
 
     ngOnInit() {
         const componentType = this.extensions.getComponentById(this.id);
         if (componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(
-                componentType
-            );
-            if (factory) {
-                this.content.clear();
-                this.componentRef = this.content.createComponent(factory, 0);
-                this.updateInstance();
-            }
+            this.content.clear();
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
+            this.updateInstance();
         }
     }
 

lib/extensions/src/lib/components/viewer/preview-extension.component.ts

@@ -15,24 +15,12 @@
  * limitations under the License.
  */
 
-import {
-    Component,
-    Input,
-    ComponentRef,
-    OnInit,
-    ComponentFactoryResolver,
-    ViewChild,
-    ViewContainerRef,
-    OnDestroy,
-    OnChanges
-} from '@angular/core';
+import { Component, Input, ComponentRef, OnInit, ViewChild, ViewContainerRef, OnDestroy, OnChanges } from '@angular/core';
 import { ExtensionService } from '../../services/extension.service';
 
 @Component({
     selector: 'adf-preview-extension',
-    template: `
-    <div #content></div>
-  `
+    template: ` <div #content></div> `
 })
 export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
     @ViewChild('content', { read: ViewContainerRef, static: true })
@@ -52,10 +40,7 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
 
     private componentRef: ComponentRef<any>;
 
-    constructor(
-        private extensionService: ExtensionService,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
+    constructor(private extensionService: ExtensionService) {}
 
     ngOnInit() {
         if (!this.id) {
@@ -64,14 +49,9 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
 
         const componentType = this.extensionService.getComponentById(this.id);
         if (componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(
-                componentType
-            );
-            if (factory) {
-                this.content.clear();
-                this.componentRef = this.content.createComponent(factory, 0);
-                this.updateInstance();
-            }
+            this.content.clear();
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
+            this.updateInstance();
         }
     }