upgrade (angular): Upgrade to angular 8 - cli and core.

devx: Change default ng-serve port. docs: Update 'getting started'.
2019-06-20 11:32:05 +03:00 · 2019-06-20 11:32:05 +03:00 · 7d51e9d491
--- a/README.md
+++ b/README.md
@ -33,10 +33,11 @@ Initial work to prove the feasibility of adapting the Angular Renderer to output
 In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications.

 ## Getting started
-
-See our [Getting Started Guide][getting-started]
+See our [Getting Started Guide][getting-started] demo
 if you're building your first project with Angular-React.

+See a simple [StackBlitz Template](https://stackblitz.com/edit/angular-react)
+
 If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md).
 You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.

--- a/apps/demo/src/app/app.component.ts
+++ b/apps/demo/src/app/app.component.ts
@ -27,7 +27,7 @@ export class AppComponent {
    }),
  };

-  @ViewChild('customRange') customRangeTemplate: TemplateRef<{
+  @ViewChild('customRange', { static: false }) customRangeTemplate: TemplateRef<{
    item: any;
    dismissMenu: (ev?: any, dismissAll?: boolean) => void;
  }>;
--- a/apps/docs/src/app/components/navbar/navbar.component.ts
+++ b/apps/docs/src/app/components/navbar/navbar.component.ts
@ -8,9 +8,9 @@ import { SubNavService } from '../../shared/sub-nav.service';
  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit, AfterViewInit {
-  @ViewChild('primary', { read: ElementRef })
+  @ViewChild('primary', { read: ElementRef, static: true })
  primaryNav: ElementRef;
-  @ViewChild('container', { read: ViewContainerRef })
+  @ViewChild('container', { read: ViewContainerRef, static: true })
  container: ViewContainerRef;

  collapseSecondaryNav = false;
--- a/apps/docs/src/app/components/triangle/triangle.component.ts
+++ b/apps/docs/src/app/components/triangle/triangle.component.ts
@ -18,7 +18,7 @@ export interface TriangleConfig {
  styleUrls: ['./triangle.component.scss'],
 })
 export class TriangleComponent implements OnInit, OnDestroy {
-  @ContentChild(TemplateRef) readonly dotTemplate: TemplateRef<{
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly dotTemplate: TemplateRef<{
    dot: SierpinskiTriangleDot;
    text: number;
  }>;
--- a/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts
+++ b/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts
@ -11,7 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
 export class AngularPerfComponent {
  DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;

-  @ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
+  @ViewChild(TriangleComponent, { static: true }) readonly triangle: TriangleComponent;

  get toggleTriangleLabel() {
    return this.triangle.isActive ? 'Stop' : 'Restart';
--- a/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.ts
+++ b/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.ts
@ -11,7 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
 export class MixedPerfComponent {
  DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;

-  @ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
+  @ViewChild(TriangleComponent, { static: true }) readonly triangle: TriangleComponent;

  projectAsAngular = true;
  contentCollapsed = true;
--- a/apps/docs/src/app/react-components/react-dot/react-dot.component.ts
+++ b/apps/docs/src/app/react-components/react-dot/react-dot.component.ts
@ -41,7 +41,7 @@ import { ReactWrapperComponent } from '@angular-react/core';
  styles: ['react-renderer'],
 })
 export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() x: string;
  @Input() y: string;
--- a/libs/core/src/lib/renderer/renderer.ts
+++ b/libs/core/src/lib/renderer/renderer.ts
@ -34,7 +34,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
  };

  constructor(eventManager: EventManager, sharedStylesHost: ɵDomSharedStylesHost) {
-    super(eventManager, sharedStylesHost);
+    super(eventManager, sharedStylesHost, 'app-id');

    // tslint:disable-next-line: no-use-before-declare
    this.defaultReactRenderer = new ReactRenderer(this);
--- a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
+++ b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
@ -39,7 +39,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IBreadcrumbProps['componentRef'];
  @Input() items: IBreadcrumbProps['items'];
--- a/libs/fabric/src/lib/components/button/action-button.component.ts
+++ b/libs/fabric/src/lib/components/button/action-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/command-bar-button.component.ts
+++ b/libs/fabric/src/lib/components/button/command-bar-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/compound-button.component.ts
+++ b/libs/fabric/src/lib/components/button/compound-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCompoundButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/default-button.component.ts
+++ b/libs/fabric/src/lib/components/button/default-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDefaultButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/icon-button.component.ts
+++ b/libs/fabric/src/lib/components/button/icon-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/messagebar-button.component.ts
+++ b/libs/fabric/src/lib/components/button/messagebar-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/primary-button.component.ts
+++ b/libs/fabric/src/lib/components/button/primary-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/button/split-button.component.ts
+++ b/libs/fabric/src/lib/components/button/split-button.component.ts
@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSplitButtonComponent extends FabBaseButtonComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/calendar/calendar.component.ts
+++ b/libs/fabric/src/lib/components/calendar/calendar.component.ts
@ -61,7 +61,7 @@ import { CalendarStringsDirective } from './directives/calendar-strings-directiv
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> implements AfterContentInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ICalendarProps['componentRef'];
  @Input() className?: ICalendarProps['className'];
@ -94,7 +94,7 @@ export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps>
  @Output() readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
  @Output() readonly onDismiss = new EventEmitter<void>();

-  @ContentChild(CalendarStringsDirective) readonly calendarStringsDirective?: CalendarStringsDirective;
+  @ContentChild(CalendarStringsDirective, /* TODO: add static flag */ {}) readonly calendarStringsDirective?: CalendarStringsDirective;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
    super(elementRef, changeDetectorRef, renderer);
--- a/libs/fabric/src/lib/components/callout/callout.component.ts
+++ b/libs/fabric/src/lib/components/callout/callout.component.ts
@ -65,7 +65,7 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ICalloutProps['componentRef'];
  @Input() target?: ICalloutProps['target'];
--- a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
+++ b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
@ -50,7 +50,7 @@ import { FormEvent } from 'react';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ICheckboxProps['componentRef'];
  @Input() className?: ICheckboxProps['className'];
--- a/libs/fabric/src/lib/components/choice-group/choice-group.component.ts
+++ b/libs/fabric/src/lib/components/choice-group/choice-group.component.ts
@ -39,7 +39,7 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IChoiceGroupProps['componentRef'];
  @Input() options?: IChoiceGroupProps['options'];
--- a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts
@ -64,7 +64,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
  @Output() readonly onMenuDismissed = new EventEmitter<void>();
  @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();

-  @ContentChild(ComboBoxOptionsDirective) readonly comboBoxOptionsDirective?: ComboBoxOptionsDirective;
+  @ContentChild(ComboBoxOptionsDirective, /* TODO: add static flag */ {}) readonly comboBoxOptionsDirective?: ComboBoxOptionsDirective;

  onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;

--- a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts
@ -52,7 +52,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabComboBoxComponent extends FabBaseComboBoxComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts
@ -52,7 +52,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, ngZone);
--- a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts
+++ b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts
@ -62,11 +62,11 @@ import {
 })
 export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
  implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy {
-  @ContentChild(CommandBarItemsDirective) readonly itemsDirective?: CommandBarItemsDirective;
-  @ContentChild(CommandBarFarItemsDirective) readonly farItemsDirective?: CommandBarFarItemsDirective;
-  @ContentChild(CommandBarOverflowItemsDirective) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
+  @ContentChild(CommandBarItemsDirective, /* TODO: add static flag */ {}) readonly itemsDirective?: CommandBarItemsDirective;
+  @ContentChild(CommandBarFarItemsDirective, /* TODO: add static flag */ {}) readonly farItemsDirective?: CommandBarFarItemsDirective;
+  @ContentChild(CommandBarOverflowItemsDirective, /* TODO: add static flag */ {}) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;

-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ICommandBarProps['componentRef'];
  @Input() overflowButtonProps?: ICommandBarProps['overflowButtonProps'];
--- a/libs/fabric/src/lib/components/command-bar/directives/command-bar-item.directives.ts
+++ b/libs/fabric/src/lib/components/command-bar/directives/command-bar-item.directives.ts
@ -17,7 +17,7 @@ export type CommandBarItemChangedPayload = ItemChangedPayload<ICommandBarItemOpt
 */
@Directive({ selector: 'fab-command-bar-item > render' })
 export class CommandBarItemRenderDirective {
-  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
 }

 /**
@ -25,7 +25,7 @@ export class CommandBarItemRenderDirective {
 */
@Directive({ selector: 'fab-command-bar-item > render-icon' })
 export class CommandBarItemRenderIconDirective {
-  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
 }

@Directive({ selector: 'fab-command-bar-item' })
--- a/libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts
+++ b/libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts
@ -33,7 +33,7 @@ export type ContextualMenuItemChangedPayload = ItemChangedPayload<
 */
@Directive({ selector: 'fab-command-bar-item > render' })
 export class ContextualMenuItemRenderDirective {
-  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderContext>;
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderContext>;
 }

 /**
@ -41,7 +41,7 @@ export class ContextualMenuItemRenderDirective {
 */
@Directive({ selector: 'fab-command-bar-item > render-icon' })
 export class ContextualMenuItemRenderIconDirective {
-  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderIconContext>;
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderIconContext>;
 }

@Directive({ selector: 'contextual-menu-item' })
@ -53,8 +53,8 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
    OnChanges<ContextualMenuItemDirective>,
    OnDestroy {
  @ContentChildren(ContextualMenuItemDirective) readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
-  @ContentChild(ContextualMenuItemRenderDirective) readonly renderDirective: ContextualMenuItemRenderDirective;
-  @ContentChild(ContextualMenuItemRenderIconDirective)
+  @ContentChild(ContextualMenuItemRenderDirective, /* TODO: add static flag */ {}) readonly renderDirective: ContextualMenuItemRenderDirective;
+  @ContentChild(ContextualMenuItemRenderIconDirective, /* TODO: add static flag */ {})
  readonly renderIconDirective: ContextualMenuItemRenderIconDirective;

  @Input() componentRef?: IContextualMenuItem['componentRef'];
--- a/libs/fabric/src/lib/components/date-picker/date-picker.component.ts
+++ b/libs/fabric/src/lib/components/date-picker/date-picker.component.ts
@ -66,7 +66,7 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IDatePickerProps['componentRef'];
  @Input() theme?: IDatePickerProps['theme'];
--- a/libs/fabric/src/lib/components/details-list/details-list.component.ts
+++ b/libs/fabric/src/lib/components/details-list/details-list.component.ts
@ -112,10 +112,10 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
 })
 export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>
  implements AfterContentInit, OnChanges<FabDetailsListComponent>, OnDestroy, OnInit {
-  @ContentChild(DetailsListColumnsDirective) readonly columnsDirective?: DetailsListColumnsDirective;
-  @ContentChild(DetailsListGroupsDirective) readonly groupsDirective?: DetailsListGroupsDirective;
+  @ContentChild(DetailsListColumnsDirective, /* TODO: add static flag */ {}) readonly columnsDirective?: DetailsListColumnsDirective;
+  @ContentChild(DetailsListGroupsDirective, /* TODO: add static flag */ {}) readonly groupsDirective?: DetailsListGroupsDirective;

-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() theme?: IDetailsListProps['theme'];
  @Input() styles?: IDetailsListProps['styles'];
--- a/libs/fabric/src/lib/components/details-list/directives/details-list-column.directive.ts
+++ b/libs/fabric/src/lib/components/details-list/directives/details-list-column.directive.ts
@ -12,7 +12,7 @@ import { ChangeableItemDirective } from '../../core/shared/changeable-item.direc
 */
@Directive({ selector: 'fab-details-list-column > render' })
 export class DetailsListColumnRenderDirective {
-  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
+  @ContentChild(TemplateRef, /* TODO: add static flag */ {}) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
 }

 /**
@ -21,7 +21,7 @@ export class DetailsListColumnRenderDirective {
@Directive({ selector: 'fab-details-list-column' })
 export class DetailsListColumnDirective extends ChangeableItemDirective<IDetailsListColumnOptions>
  implements AfterContentInit {
-  @ContentChild(DetailsListColumnRenderDirective) readonly renderDirective: DetailsListColumnRenderDirective;
+  @ContentChild(DetailsListColumnRenderDirective, /* TODO: add static flag */ {}) readonly renderDirective: DetailsListColumnRenderDirective;

  @Input() name: IColumn['name'];
  @Input() fieldName?: IColumn['fieldName'];
--- a/libs/fabric/src/lib/components/dialog/dialog.component.ts
+++ b/libs/fabric/src/lib/components/dialog/dialog.component.ts
@ -46,7 +46,7 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() responsiveMode?: IDialogProps['responsiveMode'];
  @Input() elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss'];
@ -89,7 +89,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IDialogFooterProps['componentRef'];
  @Input() styles?: IDialogFooterProps['styles'];
@ -130,7 +130,7 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IDialogContentProps['componentRef'];
  @Input() styles?: IDialogContentProps['styles'];
--- a/libs/fabric/src/lib/components/divider/divider.component.ts
+++ b/libs/fabric/src/lib/components/divider/divider.component.ts
@ -23,7 +23,7 @@ import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() getClassNames?: IVerticalDividerProps['getClassNames'];

--- a/libs/fabric/src/lib/components/dropdown/dropdown.component.ts
+++ b/libs/fabric/src/lib/components/dropdown/dropdown.component.ts
@ -65,8 +65,8 @@ import { DropdownOptionsDirective } from './directives/dropdown-options.directiv
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit, AfterContentInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
-  @ContentChild(DropdownOptionsDirective) readonly dropdownOptionsDirective?: DropdownOptionsDirective;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+  @ContentChild(DropdownOptionsDirective, /* TODO: add static flag */ {}) readonly dropdownOptionsDirective?: DropdownOptionsDirective;

  @Input() componentRef?: IDropdownProps['componentRef'];
  @Input() label?: IDropdownProps['label'];
--- a/libs/fabric/src/lib/components/fabric/fabric.component.ts
+++ b/libs/fabric/src/lib/components/fabric/fabric.component.ts
@ -25,7 +25,7 @@ import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IFabricProps['componentRef'];
  @Input() theme?: IFabricProps['theme'];
--- a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
+++ b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
@ -51,7 +51,7 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IGroupedListProps['componentRef'];
  @Input() theme?: IGroupedListProps['theme'];
--- a/libs/fabric/src/lib/components/hover-card/expanding-card.component.ts
+++ b/libs/fabric/src/lib/components/hover-card/expanding-card.component.ts
@ -48,7 +48,7 @@ import { IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabExpandingCardComponent extends ReactWrapperComponent<IExpandingCardProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: false }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IExpandingCardProps['componentRef'];
  @Input() className?: IExpandingCardProps['className'];
--- a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts
+++ b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts
@ -52,7 +52,7 @@ import { omit } from '../../utils/omit';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IHoverCardProps['componentRef'];
  @Input() className?: IHoverCardProps['className'];
--- a/libs/fabric/src/lib/components/hover-card/plain-card.component.ts
+++ b/libs/fabric/src/lib/components/hover-card/plain-card.component.ts
@ -44,7 +44,7 @@ import { IPlainCardProps } from 'office-ui-fabric-react/lib/HoverCard';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPlainCardComponent extends ReactWrapperComponent<IPlainCardProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: false }) protected reactNodeRef: ElementRef;

  @Input() componentRef: IPlainCardProps['componentRef'];
  @Input() className: IPlainCardProps['className'];
--- a/libs/fabric/src/lib/components/icon/icon.component.ts
+++ b/libs/fabric/src/lib/components/icon/icon.component.ts
@ -33,7 +33,7 @@ import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IIconProps['componentRef'];

--- a/libs/fabric/src/lib/components/image/image.component.ts
+++ b/libs/fabric/src/lib/components/image/image.component.ts
@ -70,7 +70,7 @@ export class FabImageComponent extends ReactWrapperComponent<IImageProps> {

  @Output() readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();

-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
    super(elementRef, changeDetectorRef, renderer);
--- a/libs/fabric/src/lib/components/link/link.component.ts
+++ b/libs/fabric/src/lib/components/link/link.component.ts
@ -52,7 +52,7 @@ import { ILinkProps, Link } from 'office-ui-fabric-react';
 export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
  readonly LinkType: any = Link;

-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() href: ILinkProps['href'];
  @Input() type?: ILinkProps['type'];
--- a/libs/fabric/src/lib/components/marquee-selection/marquee-selection.component.ts
+++ b/libs/fabric/src/lib/components/marquee-selection/marquee-selection.component.ts
@ -37,7 +37,7 @@ import { IMarqueeSelectionProps } from 'office-ui-fabric-react/lib/MarqueeSelect
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IMarqueeSelectionProps['componentRef'];
  @Input() selection: IMarqueeSelectionProps['selection'];
--- a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts
+++ b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts
@ -42,7 +42,7 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IMessageBarProps['componentRef'];
  @Input() messageBarType?: IMessageBarProps['messageBarType'];
--- a/libs/fabric/src/lib/components/modal/modal.component.ts
+++ b/libs/fabric/src/lib/components/modal/modal.component.ts
@ -54,7 +54,7 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
 })
 export class FabModalComponent extends ReactWrapperComponent<IModalProps>
  implements IWithResponsiveModeState, IAccessiblePopupProps {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() responsiveMode?: IModalProps['responsiveMode'];

--- a/libs/fabric/src/lib/components/nav/nav.component.ts
+++ b/libs/fabric/src/lib/components/nav/nav.component.ts
@ -38,7 +38,7 @@ import {
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabNavComponent extends ReactWrapperComponent<INavProps> {
-  @ViewChild('reactNode')
+  @ViewChild('reactNode', { static: true })
  protected reactNodeRef: ElementRef;

  @Input() componentRef?: INavProps['componentRef'];
--- a/libs/fabric/src/lib/components/panel/panel.component.ts
+++ b/libs/fabric/src/lib/components/panel/panel.component.ts
@ -62,7 +62,7 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IPanelProps['componentRef'];
  @Input() isOpen?: IPanelProps['isOpen'];
--- a/libs/fabric/src/lib/components/persona/persona.component.ts
+++ b/libs/fabric/src/lib/components/persona/persona.component.ts
@ -101,7 +101,7 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IPersonaProps['componentRef'];
  @Input() className?: IPersonaProps['className'];
@ -169,7 +169,7 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IPersonaCoinProps['componentRef'];
  @Input() styles?: IPersonaCoinProps['styles'];
--- a/libs/fabric/src/lib/components/pivot/pivot.component.ts
+++ b/libs/fabric/src/lib/components/pivot/pivot.component.ts
@ -43,7 +43,7 @@ import * as React from 'react';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() @passProp() componentRef?: IPivotItemProps['componentRef'];

@ -106,7 +106,7 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
  readonly PivotType = Pivot;
  readonly PivotItemType = PivotItem;

-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @ContentChildren(FabPivotItemComponent) pivotItems: QueryList<FabPivotItemComponent>;

--- a/libs/fabric/src/lib/components/search-box/search-box.component.ts
+++ b/libs/fabric/src/lib/components/search-box/search-box.component.ts
@ -46,7 +46,7 @@ import omit from '../../utils/omit';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ISearchBoxProps['componentRef'];
  @Input() placeholder?: ISearchBoxProps['placeholder'];
--- a/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
+++ b/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
@ -38,7 +38,7 @@ import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IShimmerProps['componentRef'];
  @Input() width?: IShimmerProps['width'];
@ -91,7 +91,7 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: IShimmerElementsGroupProps['componentRef'];
  @Input() rowHeight?: IShimmerElementsGroupProps['rowHeight'];
--- a/libs/fabric/src/lib/components/slider/slider.component.ts
+++ b/libs/fabric/src/lib/components/slider/slider.component.ts
@ -47,7 +47,7 @@ import { ISliderProps } from 'office-ui-fabric-react/lib/Slider';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSliderComponent extends ReactWrapperComponent<ISliderProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ISliderProps['componentRef'];
  @Input() styles?: ISliderProps['styles'];
--- a/libs/fabric/src/lib/components/spin-button/spin-button.component.ts
+++ b/libs/fabric/src/lib/components/spin-button/spin-button.component.ts
@ -62,7 +62,7 @@ import { ISpinButtonProps } from 'office-ui-fabric-react/lib/SpinButton';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSpinButtonComponent extends ReactWrapperComponent<ISpinButtonProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ISpinButtonProps['componentRef'];
  @Input() defaultValue?: ISpinButtonProps['defaultValue'];
--- a/libs/fabric/src/lib/components/spinner/spinner.component.ts
+++ b/libs/fabric/src/lib/components/spinner/spinner.component.ts
@ -36,7 +36,7 @@ import { ISpinnerProps } from 'office-ui-fabric-react/lib/Spinner';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSpinnerComponent extends ReactWrapperComponent<ISpinnerProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ISpinnerProps['componentRef'];
  @Input() type?: ISpinnerProps['type'];
--- a/libs/fabric/src/lib/components/text-field/base-text-field.component.ts
+++ b/libs/fabric/src/lib/components/text-field/base-text-field.component.ts
@ -15,7 +15,7 @@ import {
 import { ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';

 export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldProps> implements OnInit {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() required?: ITextFieldProps['required'];
  @Input() placeholder?: ITextFieldProps['placeholder'];
--- a/libs/fabric/src/lib/components/text-field/masked-text-field.component.ts
+++ b/libs/fabric/src/lib/components/text-field/masked-text-field.component.ts
@ -68,7 +68,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMaskedTextFieldComponent extends FabBaseTextFieldComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
    super(elementRef, changeDetectorRef, renderer);
--- a/libs/fabric/src/lib/components/text-field/text-field.component.ts
+++ b/libs/fabric/src/lib/components/text-field/text-field.component.ts
@ -69,7 +69,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTextFieldComponent extends FabBaseTextFieldComponent {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
    super(elementRef, changeDetectorRef, renderer);
--- a/libs/fabric/src/lib/components/toggle/toggle.component.ts
+++ b/libs/fabric/src/lib/components/toggle/toggle.component.ts
@ -41,7 +41,7 @@ import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabToggleComponent extends ReactWrapperComponent<IToggleProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() as?: IToggleProps['as'];
  @Input() componentRef?: IToggleProps['componentRef'];
--- a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
+++ b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
@ -44,7 +44,7 @@ import { omit } from '../../utils/omit';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

  @Input() componentRef?: ITooltipHostProps['componentRef'];
  @Input() closeDelay?: ITooltipHostProps['closeDelay'];
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
-    "start": "ng serve",
+    "start": "ng serve  --port 4201",
    "start:demo": "ng serve demo",
    "start:docs": "ng serve docs",
    "build": "ng build",
@ -55,16 +55,16 @@
  },
  "private": false,
  "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "~8.0.2",
    "@angular/cdk": "~7.2.0",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
+    "@angular/common": "~8.0.2",
+    "@angular/compiler": "~8.0.2",
+    "@angular/core": "~8.0.2",
+    "@angular/forms": "~8.0.2",
    "@angular/material": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
+    "@angular/platform-browser": "~8.0.2",
+    "@angular/platform-browser-dynamic": "~8.0.2",
+    "@angular/router": "~8.0.2",
    "@ngrx/effects": "~7.0.0",
    "@ngrx/router-store": "~7.0.0",
    "@ngrx/store": "~7.0.0",
@ -74,19 +74,19 @@
    "office-ui-fabric-react": "6.151.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
-    "rxjs": "6.3.3",
+    "rxjs": "6.5.2",
    "rxjs-compat": "6.2.2",
    "semantic-ui-react": "^0.82.1",
    "web-animations-js": "^2.3.1",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.9.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.12.1",
+    "@angular-devkit/build-angular": "~0.800.3",
    "@angular-devkit/core": "~7.2.0",
    "@angular-devkit/schematics": "~7.2.0",
-    "@angular/cli": "~7.2.0",
-    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "~7.2.0",
+    "@angular/cli": "~8.0.3",
+    "@angular/compiler-cli": "~8.0.2",
+    "@angular/language-service": "~8.0.2",
    "@ngrx/schematics": "~7.0.0",
    "@nrwl/nx": "^7.3.0",
    "@nrwl/schematics": "^7.3.0",
@ -119,6 +119,6 @@
    "tsickle": "^0.34.0",
    "tslib": "^1.9.0",
    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "typescript": "~3.4.5"
  }
 }