chore: remove deprecated Angular api (#9516)

lib/content-services/src/lib/directives/node-counter.directive.ts

@@ -15,27 +15,22 @@
  * limitations under the License.
  */
 
-import { Directive, Input, Component, OnInit, OnChanges, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
+import { Directive, Input, Component, OnInit, OnChanges, ViewContainerRef } from '@angular/core';
 
 @Directive({
     selector: '[adf-node-counter]'
 })
 export class NodeCounterDirective implements OnInit, OnChanges {
-
     /** Number to display in the counter badge */
     @Input('adf-node-counter')
     counter: number;
 
     componentRef: NodeCounterComponent;
 
-    constructor(
+    constructor(private viewContainerRef: ViewContainerRef) {}
-        private resolver: ComponentFactoryResolver,
-        public viewContainerRef: ViewContainerRef
-    ) {}
 
     ngOnInit() {
-        const componentFactory = this.resolver.resolveComponentFactory(NodeCounterComponent);
+        this.componentRef = this.viewContainerRef.createComponent(NodeCounterComponent).instance;
-        this.componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
         this.componentRef.counter = this.counter;
     }
 
@@ -48,9 +43,7 @@ export class NodeCounterDirective implements OnInit, OnChanges {
 
 @Component({
     selector: 'adf-node-counter',
-    template: `
+    template: ` <div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate : { count: counter } }}</div> `
-        <div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate: { count: counter } }}</div>
-    `
 })
 export class NodeCounterComponent {
     counter: number;

lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts

@@ -15,18 +15,7 @@
  * limitations under the License.
  */
 
-import {
+import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, ComponentRef, SimpleChanges, OnChanges } from '@angular/core';
-    Component,
-    Input,
-    ViewChild,
-    ViewContainerRef,
-    OnInit,
-    OnDestroy,
-    ComponentRef,
-    ComponentFactoryResolver,
-    SimpleChanges,
-    OnChanges
-} from '@angular/core';
 import { SearchFilterService } from '../../services/search-filter.service';
 import { Observable } from 'rxjs';
 import { SearchQueryBuilderService } from '../../services';
@@ -56,21 +45,14 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
 
     componentRef: ComponentRef<any>;
 
-    constructor(
+    constructor(private searchFilterService: SearchFilterService, private queryBuilder: SearchQueryBuilderService) {}
-        private searchFilterService: SearchFilterService,
-        private queryBuilder: SearchQueryBuilderService,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
 
     ngOnInit() {
         const componentType = this.searchFilterService.widgets[this.selector];
         if (componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+            this.content.clear();
-            if (factory) {
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
-                this.content.clear();
+            this.setupWidget(this.componentRef);
-                this.componentRef = this.content.createComponent(factory, 0);
-                this.setupWidget(this.componentRef);
-            }
         }
     }
 

lib/core/src/lib/card-view/card-view.module.ts

@@ -34,7 +34,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive';
 import { CardViewComponent } from './components/card-view/card-view.component';
 import { CardViewBoolItemComponent } from './components/card-view-boolitem/card-view-boolitem.component';
 import { CardViewDateItemComponent } from './components/card-view-dateitem/card-view-dateitem.component';
@@ -77,7 +76,6 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
         CardViewKeyValuePairsItemComponent,
         CardViewSelectItemComponent,
         CardViewItemDispatcherComponent,
-        CardViewContentProxyDirective,
         CardViewArrayItemComponent,
         SelectFilterInputComponent
     ],

lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts

@@ -22,7 +22,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CardViewItem } from '../../interfaces/card-view-item.interface';
 import { CardItemTypeService } from '../../services/card-item-types.service';
-import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
 import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
 
 @Component({
@@ -35,7 +34,6 @@ export class CardViewShinyCustomElementItemComponent {
 }
 
 describe('CardViewItemDispatcherComponent', () => {
-
     let fixture: ComponentFixture<CardViewItemDispatcherComponent>;
     let cardItemTypeService: CardItemTypeService;
     let component: CardViewItemDispatcherComponent;
@@ -45,12 +43,8 @@ describe('CardViewItemDispatcherComponent', () => {
         cardItemTypeService.setComponentTypeResolver('shiny-custom-element', () => CardViewShinyCustomElementItemComponent);
 
         TestBed.configureTestingModule({
-            declarations: [
+            declarations: [CardViewItemDispatcherComponent, CardViewShinyCustomElementItemComponent],
-                CardViewItemDispatcherComponent,
+            providers: [{ provide: CardItemTypeService, useValue: cardItemTypeService }]
-                CardViewShinyCustomElementItemComponent,
-                CardViewContentProxyDirective
-            ],
-            providers: [ { provide: CardItemTypeService, useValue: cardItemTypeService } ]
         });
 
         TestBed.compileComponents();
@@ -83,7 +77,6 @@ describe('CardViewItemDispatcherComponent', () => {
     });
 
     describe('Sub-component creation', () => {
-
         it('should load the CardViewShinyCustomElementItemComponent', () => {
             const innerElement = fixture.debugElement.query(By.css('[data-automation-id="found-me"]'));
             expect(innerElement).not.toBeNull();
@@ -108,7 +101,7 @@ describe('CardViewItemDispatcherComponent', () => {
             expect(shinyCustomElementItemComponent.displayEmpty).toBe(component.displayEmpty);
         });
 
-        it('should update the subcomponent\'s input parameters', () => {
+        it('should update the subcomponent input parameters', () => {
             const expectedEditable = false;
             const expectedDisplayEmpty = true;
             const expectedProperty = {};
@@ -139,8 +132,7 @@ describe('CardViewItemDispatcherComponent', () => {
     });
 
     describe('Angular life-cycle methods', () => {
-
+        let shinyCustomElementItemComponent: any;
-        let shinyCustomElementItemComponent;
 
         const lifeCycleMethods = [
             'ngOnChanges',

lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts

@@ -15,22 +15,14 @@
  * limitations under the License.
  */
 
-import {
+import { Component, Input, OnChanges, SimpleChange, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
-    Component,
-    Input,
-    OnChanges,
-    SimpleChange,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
 import { CardViewItem } from '../../interfaces/card-view-item.interface';
 import { CardItemTypeService } from '../../services/card-item-types.service';
-import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
 import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.component';
 
 @Component({
     selector: 'adf-card-view-item-dispatcher',
-    template: '<ng-template adf-card-view-content-proxy></ng-template>'
+    template: '<ng-template #content></ng-template>'
 })
 export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
@@ -60,15 +52,15 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
     displayLabelForChips: boolean = false;
 
-    @ViewChild(CardViewContentProxyDirective, { static: true })
-    private content: CardViewContentProxyDirective;
-
     private loaded: boolean = false;
     private componentReference: any = null;
 
     public ngOnInit;
     public ngDoCheck;
 
+    @ViewChild('content', { read: ViewContainerRef, static: true })
+    content!: ViewContainerRef;
+
     constructor(private cardItemTypeService: CardItemTypeService) {
         const dynamicLifeCycleMethods = [
             'ngOnInit',
@@ -91,10 +83,9 @@ export class CardViewItemDispatcherComponent implements OnChanges {
             this.loaded = true;
         }
 
-        Object.entries(changes)
+        Object.entries(changes).forEach(([changeName, change]: [string, SimpleChange]) => {
-            .forEach(([changeName, change]: [string, SimpleChange]) => {
+            this.componentReference.instance[changeName] = change.currentValue;
-                this.componentReference.instance[changeName] = change.currentValue;
+        });
-            });
 
         this.proxy('ngOnChanges', changes);
     }
@@ -102,7 +93,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     private loadComponent() {
         const factoryClass = this.cardItemTypeService.resolveComponentType(this.property);
 
-        this.componentReference = this.content.viewContainerRef.createComponent(factoryClass);
+        this.componentReference = this.content.createComponent(factoryClass);
 
         this.componentReference.instance.editable = this.editable;
         this.componentReference.instance.property = this.property;

lib/core/src/lib/card-view/directives/card-view-content-proxy.directive.ts

@@ -1,25 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Directive, ViewContainerRef } from '@angular/core';
-
-@Directive({
-    selector: '[adf-card-view-content-proxy]'
-})
-export class CardViewContentProxyDirective {
-    constructor(public viewContainerRef: ViewContainerRef) { }
-}

lib/core/src/lib/card-view/public-api.ts

@@ -32,6 +32,4 @@ export * from './interfaces/card-view.interfaces';
 export * from './validators/card-view.validators';
 export * from './models/card-view.models';
 export * from './services/card-view.services';
-export * from './directives/card-view-content-proxy.directive';
-
 export * from './card-view.module';

lib/core/src/lib/clipboard/clipboard.directive.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation, OnInit } from '@angular/core';
+import { Directive, Input, HostListener, Component, ViewContainerRef, ViewEncapsulation, OnInit } from '@angular/core';
 import { ClipboardService } from './clipboard.service';
 
 @Directive({
@@ -36,16 +36,12 @@ export class ClipboardDirective {
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('clipboard-notification') message: string;
 
-    constructor(private clipboardService: ClipboardService,
+    constructor(private clipboardService: ClipboardService, public viewContainerRef: ViewContainerRef) {}
-                public viewContainerRef: ViewContainerRef,
-                private resolver: ComponentFactoryResolver) {}
-
 
     @HostListener('mouseenter')
     showTooltip() {
         if (this.placeholder) {
-            const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
+            const componentRef = this.viewContainerRef.createComponent(ClipboardComponent).instance;
-            const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
             componentRef.placeholder = this.placeholder;
         }
     }
@@ -70,14 +66,14 @@ export class ClipboardDirective {
         }
     }
 
-    private copyContentToClipboard(content) {
+    private copyContentToClipboard(content: string) {
         this.clipboardService.copyContentToClipboard(content, this.message);
     }
 }
 
 @Component({
     selector: 'adf-copy-content-tooltip',
-    template: `<span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>`,
+    template: `<span class="adf-copy-tooltip">{{ placeholder | translate }} </span>`,
     encapsulation: ViewEncapsulation.None
 })
 export class ClipboardComponent implements OnInit {

lib/core/src/lib/form/components/form-field/form-field.component.ts

@@ -19,10 +19,8 @@ import {
     Compiler,
     Component,
     ComponentFactory,
-    ComponentFactoryResolver,
     ComponentRef,
     Input,
-    ModuleWithComponentFactories,
     NgModule,
     OnDestroy,
     OnInit,
@@ -70,12 +68,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
 
     focus: boolean = false;
 
-    constructor(
+    constructor(private formRenderingService: FormRenderingService, private visibilityService: WidgetVisibilityService, private compiler: Compiler) {}
-        private formRenderingService: FormRenderingService,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private visibilityService: WidgetVisibilityService,
-        private compiler: Compiler
-    ) {}
 
     ngOnInit() {
         const w: any = window;
@@ -95,8 +88,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
             } else {
                 const componentType = this.formRenderingService.resolveComponentType(originalField);
                 if (componentType) {
-                    const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+                    this.componentRef = this.container.createComponent(componentType);
-                    this.componentRef = this.container.createComponent(factory);
                     const instance = this.componentRef.instance;
                     instance.field = this.field;
                     instance.fieldChanged.subscribe((field) => {
@@ -153,7 +145,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
         const decoratedCmp = Component(metadata)(cmpClass);
         const moduleClass = class RuntimeComponentModule {};
         const decoratedNgModule = NgModule({ imports: [], declarations: [decoratedCmp] })(moduleClass);
-        const module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(decoratedNgModule);
+        const module = compiler.compileModuleAndAllComponentsSync(decoratedNgModule);
 
         return module.componentFactories.find((x) => x.componentType === decoratedCmp);
     }

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

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

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

@@ -15,24 +15,12 @@
  * limitations under the License.
  */
 
-import {
+import { Component, Input, ComponentRef, OnInit, ViewChild, ViewContainerRef, OnDestroy, OnChanges } from '@angular/core';
-    Component,
-    Input,
-    ComponentRef,
-    OnInit,
-    ComponentFactoryResolver,
-    ViewChild,
-    ViewContainerRef,
-    OnDestroy,
-    OnChanges
-} from '@angular/core';
 import { ExtensionService } from '../../services/extension.service';
 
 @Component({
     selector: 'adf-preview-extension',
-    template: `
+    template: ` <div #content></div> `
-    <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(
+    constructor(private extensionService: ExtensionService) {}
-        private extensionService: ExtensionService,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
 
     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(
+            this.content.clear();
-                componentType
+            this.componentRef = this.content.createComponent(componentType, { index: 0 });
-            );
+            this.updateInstance();
-            if (factory) {
-                this.content.clear();
-                this.componentRef = this.content.createComponent(factory, 0);
-                this.updateInstance();
-            }
         }
     }