@angular/core migration - migration-v9-undecorated-classes-with-decorated-fields

Undecorated classes with decorated fields migration. As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes

libs/core/src/lib/components/wrapper-component.ts

@@ -2,17 +2,7 @@
 // Licensed under the MIT License.
 /// <reference path="../@types/geteventlisteners.d.ts" />
 
-import {
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Input, NgZone, OnChanges, Renderer2, SimpleChanges, AfterContentInit, Directive } from '@angular/core';
-  AfterViewInit,
-  ChangeDetectorRef,
-  ElementRef,
-  Input,
-  NgZone,
-  OnChanges,
-  Renderer2,
-  SimpleChanges,
-  AfterContentInit,
-} from '@angular/core';
 import classnames from 'classnames';
 import toStyle from 'css-to-style';
 import stylenames, { StyleObject } from 'stylenames';
@@ -59,6 +49,7 @@ const defaultWrapperComponentOptions: WrapperComponentOptions = {
  * Simplifies some of the handling around passing down props and CSS styling on the host component.
  */
 // NOTE: TProps is not used at the moment, but a preparation for a potential future change.
+@Directive()
 export abstract class ReactWrapperComponent<TProps extends {}> implements AfterContentInit, AfterViewInit, OnChanges {
   private _contentClass: Many<ContentClassValue>;
   private _contentStyle: ContentStyleValue;

libs/fabric/lib/components/button/base-button.component.ts

@@ -2,20 +2,7 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2, ContentChildren, QueryList, AfterContentInit, OnDestroy, Directive } from '@angular/core';
-  ChangeDetectorRef,
-  ElementRef,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnInit,
-  Output,
-  Renderer2,
-  ContentChildren,
-  QueryList,
-  AfterContentInit,
-  OnDestroy,
-} from '@angular/core';
 import { IButtonProps } from '@fluentui/react/lib/Button';
 import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 import { ChangeableItemsHelper, mergeItemChanges } from '@angular-react/fabric/lib/components/core';
@@ -25,6 +12,7 @@ import { Subscription } from 'rxjs';
 import { ContextualMenuItemDirective, IContextualMenuItemOptions } from '@angular-react/fabric/lib/components/contextual-menu';
 import { CommandBarItemChangedPayload } from '@angular-react/fabric/lib/components/command-bar';
 
+@Directive()
 export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps>
   implements OnInit, AfterContentInit, OnDestroy {
   @Input() componentRef?: IButtonProps['componentRef'];

libs/fabric/lib/components/combo-box/base-combo-box.component.ts

@@ -2,23 +2,13 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2, ContentChild, AfterContentInit, Directive } from '@angular/core';
-  ChangeDetectorRef,
-  ElementRef,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnInit,
-  Output,
-  Renderer2,
-  ContentChild,
-  AfterContentInit,
-} from '@angular/core';
 import { IComboBox, IComboBoxOption, IComboBoxProps } from '@fluentui/react/lib/ComboBox';
 import { ComboBoxOptionDirective } from './directives/combo-box-option.directive';
 import { ComboBoxOptionsDirective } from './directives/combo-box-options.directive';
 import { OnChanges, TypedChanges } from '@angular-react/fabric/lib/declarations';
 
+@Directive()
 export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps>
   implements OnInit, OnChanges<FabBaseComboBoxComponent>, AfterContentInit {
 

libs/fabric/lib/components/core/shared/changeable-item.directive.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventEmitter, Input, OnInit, Output, Directive } from '@angular/core';
 
 import { OnChanges } from '@angular-react/fabric/lib/declarations';;
 import { ItemChangedPayload, ItemChanges } from '../declarative/item-changed.payload';
@@ -10,6 +10,7 @@ import { ChangeableItemHelper } from './changeable-helper';
 /**
  * Parent class for wrapper directive for single item with OnChanges
  */
+@Directive()
 export abstract class ChangeableItemDirective<TItem> implements OnChanges<ChangeableItemDirective<TItem>>, OnInit {
   @Input() key: string;
 

libs/fabric/lib/components/core/shared/changeable-items.directive.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { AfterContentInit, ContentChildren, EventEmitter, OnDestroy, Output, QueryList } from '@angular/core';
+import { AfterContentInit, ContentChildren, EventEmitter, OnDestroy, Output, QueryList, Directive } from '@angular/core';
 
 import { ItemChangedPayload } from '../declarative/item-changed.payload';
 import { ChangeableItemsHelper, IChangeableItemsContainer } from './changeable-helper';
@@ -10,6 +10,7 @@ import { ChangeableItemDirective } from './changeable-item.directive';
 /**
  * Parent class for wrapper directive for multiple ChangeableItemDirectives
  */
+@Directive()
 export abstract class ChangeableItemsDirective<TItem>
   implements AfterContentInit, IChangeableItemsContainer<TItem>, OnDestroy {
   @ContentChildren(ChangeableItemDirective) readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;

libs/fabric/lib/components/persona/persona.component.ts

@@ -2,23 +2,12 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2, ViewChild, Directive } from '@angular/core';
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnInit,
-  Output,
-  Renderer2,
-  ViewChild,
-} from '@angular/core';
 import { ImageLoadState } from '@fluentui/react/lib/components/Image/Image.types';
 import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from '@fluentui/react/lib/Persona';
 import { Styled } from '@angular-react/fabric/lib/utils';
 
+@Directive()
 export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps> extends ReactWrapperComponent<TProps>
   implements OnInit {
   @Input() text?: IPersonaProps['text'];

libs/fabric/lib/components/pickers/base-picker/base-picker.component.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, Omit, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2, Directive } from '@angular/core';
 import { IPersonaProps } from '@fluentui/react/lib/Persona';
 import {
   IBasePickerProps,
@@ -11,6 +11,7 @@ import {
 } from '@fluentui/react/lib/Pickers';
 import { omit } from '@angular-react/fabric/lib/utils';
 
+@Directive()
 export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
   extends ReactWrapperComponent<TProps>
   implements OnInit {

libs/fabric/lib/components/text-field/base-text-field.component.ts

@@ -2,18 +2,10 @@
 // Licensed under the MIT License.
 
 import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core';
-import {
+import { ChangeDetectorRef, EventEmitter, ElementRef, Input, Renderer2, ViewChild, OnInit, Output, Directive } from '@angular/core';
-  ChangeDetectorRef,
-  EventEmitter,
-  ElementRef,
-  Input,
-  Renderer2,
-  ViewChild,
-  OnInit,
-  Output,
-} from '@angular/core';
 import { ITextFieldProps } from '@fluentui/react/lib/TextField';
 
+@Directive()
 export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldProps> implements OnInit {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;