Remove deprecated Angular API

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(
-        private resolver: ComponentFactoryResolver,
-        public viewContainerRef: ViewContainerRef
-    ) {}
+    constructor(private viewContainerRef: ViewContainerRef) {}
 
     ngOnInit() {
-        const componentFactory = this.resolver.resolveComponentFactory(NodeCounterComponent);
-        this.componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
+        this.componentRef = this.viewContainerRef.createComponent(NodeCounterComponent).instance;
         this.componentRef.counter = this.counter;
     }
 
@@ -48,9 +43,7 @@ export class NodeCounterDirective implements OnInit, OnChanges {
 
 @Component({
     selector: 'adf-node-counter',
-    template: `
-        <div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate: { count: counter } }}</div>
-    `
+    template: ` <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 {
-    Component,
-    Input,
-    ViewChild,
-    ViewContainerRef,
-    OnInit,
-    OnDestroy,
-    ComponentRef,
-    ComponentFactoryResolver,
-    SimpleChanges,
-    OnChanges
-} from '@angular/core';
+import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, ComponentRef, 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(
-        private searchFilterService: SearchFilterService,
-        private queryBuilder: SearchQueryBuilderService,
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {}
+    constructor(private searchFilterService: SearchFilterService, private queryBuilder: SearchQueryBuilderService) {}
 
     ngOnInit() {
         const componentType = this.searchFilterService.widgets[this.selector];
         if (componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
-            if (factory) {
-                this.content.clear();
-                this.componentRef = this.content.createComponent(factory, 0);
-                this.setupWidget(this.componentRef);
-            }
+            this.content.clear();
+            this.componentRef = this.content.createComponent(componentType, { index: 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: [
-                CardViewItemDispatcherComponent,
-                CardViewShinyCustomElementItemComponent,
-                CardViewContentProxyDirective
-            ],
-            providers: [ { provide: CardItemTypeService, useValue: cardItemTypeService } ]
+            declarations: [CardViewItemDispatcherComponent, CardViewShinyCustomElementItemComponent],
+            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;
+        let shinyCustomElementItemComponent: any;
 
         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 {
-    Component,
-    Input,
-    OnChanges,
-    SimpleChange,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange, SimpleChanges, ViewChild, ViewContainerRef } 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,18 +83,17 @@ export class CardViewItemDispatcherComponent implements OnChanges {
             this.loaded = true;
         }
 
-        Object.entries(changes)
-            .forEach(([changeName, change]: [string, SimpleChange]) => {
-                this.componentReference.instance[changeName] = change.currentValue;
-            });
+        Object.entries(changes).forEach(([changeName, change]: [string, SimpleChange]) => {
+            this.componentReference.instance[changeName] = change.currentValue;
+        });
 
         this.proxy('ngOnChanges', changes);
     }
 
     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/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,
-                public viewContainerRef: ViewContainerRef,
-                private resolver: ComponentFactoryResolver) {}
-
+    constructor(private clipboardService: ClipboardService, public viewContainerRef: ViewContainerRef) {}
 
     @HostListener('mouseenter')
     showTooltip() {
         if (this.placeholder) {
-            const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
-            const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
+            const componentRef = this.viewContainerRef.createComponent(ClipboardComponent).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(
-        private formRenderingService: FormRenderingService,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private visibilityService: WidgetVisibilityService,
-        private compiler: Compiler
-    ) {}
+    constructor(private formRenderingService: FormRenderingService, 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(factory);
+                    this.componentRef = this.container.createComponent(componentType);
                     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);
     }