Upgrade to Angular 8

Issue-ID: VID-742
Change-Id: Ic4b3aae71d4c946e23d854847a49aa7e020c465d
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>

15 files changed, 42 insertions, 28 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
index 25d170320..7e59f1741 100644
--- a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
+++ b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
@@ -36,6 +36,8 @@ import {ComponentInfoComponent} from './service-planning/component-info/componen
 import {ComponentInfoService} from "./service-planning/component-info/component-info.service";
 import {NetworkStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service";
+import {ModalModule} from "onap-ui-angular/dist/modals/modal.module";
+import {ModalService} from "../shared/components/customModal/services/modal.service";
 
 
 @NgModule({
@@ -48,7 +50,8 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     CommonModule,
     SdcUiComponentsModule,
     SharedModule.forRoot(),
-    FeatureFlagModule.forRoot()],
+    FeatureFlagModule.forRoot(),
+    ModalModule],
   providers: [
     AaiService,
     ObjectToTreeService,
@@ -64,7 +67,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     DynamicInputsService,
     InstanceTreeGenerator,
     SharedTreeService,
-    SdcUiServices.ModalService,
+    ModalService,
     SdcUiServices.LoaderService,
     CreateDynamicComponentService,
     ComponentInfoService,
@@ -83,7 +86,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     SearchComponent,
     ComponentInfoComponent],
   entryComponents: [DuplicateVnfComponent],
-  exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent]
+  exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent, DuplicateVnfComponent]
 })
 
 export class DrawingBoardModule {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
index 13147b7e5..7475c77c7 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
@@ -88,7 +88,7 @@ export class AvailableModelsTreeComponent {
 
   @Output()
   highlightInstances: EventEmitter<number> = new EventEmitter<number>();
-  @ViewChild('tree') tree: TreeComponent;
+  @ViewChild('tree', {static: false}) tree: TreeComponent;
 
   nodes = [];
   service = {name: ''};
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
index 8228f9531..395b5f3bf 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
@@ -80,7 +80,7 @@ export class DrawingBoardHeader {
   }
 
 
-  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+  @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
 
   editViewEdit(): void {
      window.parent.location.assign(this._drawingBoardHeaderService.generateOldViewEditPath());
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
index 7e28b2a65..8ecb3963a 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
@@ -26,6 +26,7 @@ class MockAppStore<T>{
   }
 }
 
+class MockDragAndDropService<T> {}
 describe('Generate path to old View/Edit ', () => {
   let injector;
   let service: DrawingBoardHeaderService;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
index 96e50178b..2daaaaf71 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
@@ -1,9 +1,7 @@
 import {Injectable} from "@angular/core";
 import {NgRedux} from "@angular-redux/store";
 import {AppState} from "../../../../shared/store/reducers";
-import {DragAndDropModel} from "./dragAndDrop.model";
 import {FeatureFlagsService, Features} from "../../../../shared/services/featureFlag/feature-flags.service";
-import * as _ from 'lodash';
 
 @Injectable()
 export class DragAndDropService {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
index 4ad1b06cf..a195cf019 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
@@ -13,7 +13,6 @@ import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board
 import {NetworkPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/network/network.popup.service";
 import {VfModulePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service";
 import {VnfPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {HighlightPipe} from "../../../shared/pipes/highlight/highlight-filter.pipe";
 import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {ObjectToInstanceTreeService} from "../objectsToTree/objectToInstanceTree/objectToInstanceTree.service";
@@ -29,6 +28,7 @@ import {ComponentInfoModel} from "../component-info/component-info-model";
 import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service";
 import {DrawingBoardModes} from "../drawing-board.modes";
 import {ServiceInstanceActions} from "../../../shared/models/serviceInstanceActions";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Component({
   selector: 'drawing-board-tree',
@@ -52,7 +52,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
   static triggerDeleteActionService: Subject<string> = new Subject<string>();
   static triggerUndoDeleteActionService: Subject<string> = new Subject<string>();
   static triggerreCalculateIsDirty: Subject<string> = new Subject<string>();
-  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+  @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
 
   constructor(private _contextMenuService: ContextMenuService,
               private _iframeService: IframeService,
@@ -60,7 +60,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
               private store: NgRedux<AppState>,
               private route: ActivatedRoute,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _drawingBoardTreeService: DrawingBoardTreeService,
               private _networkPopupService: NetworkPopupService,
               private _vfModulePopuopService: VfModulePopupService,
@@ -120,7 +120,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
   @Output()
   highlightNode: EventEmitter<number> = new EventEmitter<number>();
 
-  @ViewChild('tree') tree: TreeComponent;
+  @ViewChild('tree', {static: false}) tree: TreeComponent;
   missingDataTooltip: string = Constants.Error.MISSING_VNF_DETAILS;
   currentNode: ITreeNode = null;
   flags: any;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
index 6423e8ad1..2f8ece283 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
@@ -2,12 +2,12 @@ import {DuplicateService} from './duplicate.service';
 import {LogService} from '../../../shared/utils/log/log.service';
 import {NgRedux} from '@angular-redux/store';
 import {ITreeNode} from "angular-tree-component/dist/defs/api";
-import {SdcUiServices} from "onap-ui-angular";
-import {IModalConfig} from 'onap-ui-angular/dist/components/common';
 import {AppState} from "../../../shared/store/reducers";
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
 import {SharedTreeService} from "../objectsToTree/shared.tree.service";
+import {IModalConfig} from "../../../shared/components/customModal/models/modal.model";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 class MockAppStore<T> {
   getState(){
@@ -73,7 +73,7 @@ describe('Drawing board tree service', () => {
         LogService,
         {provide: FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
index c8338cbfc..c3a5a28c0 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
@@ -8,19 +8,20 @@ import {VfModuleMap} from "../../../shared/models/vfModulesMap";
 import * as _ from "lodash";
 import {DefaultDataGeneratorService} from "../../../shared/services/defaultDataServiceGenerator/default.data.generator.service";
 import {TypeNodeInformation} from "../typeNodeInformation.model";
-import {SdcUiCommon, SdcUiServices} from "onap-ui-angular";
+import {SdcUiCommon} from "onap-ui-angular";
 import {changeInstanceCounter, duplicateBulkInstances} from "../../../shared/storeUtil/utils/general/general.actions";
 import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
 import {Utils} from "../../../shared/utils/utils";
 import {SharedTreeService} from "../objectsToTree/shared.tree.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Injectable()
 export class DuplicateService {
 
   constructor(private _logService: LogService,
               private sharedTreeService : SharedTreeService,
-              private _store: NgRedux<AppState>, modalService: SdcUiServices.ModalService) {
+              private _store: NgRedux<AppState>, modalService: ModalService) {
     this.modalService = modalService;
   }
 
@@ -35,7 +36,7 @@ export class DuplicateService {
   maxNumberOfDuplicate: number = 0;
   storeKey: string = null;
   padding = '0000';
-  modalService: SdcUiServices.ModalService;
+  modalService: ModalService;
   store: NgRedux<AppState>;
   existingNames: { [key: string]: any };
   currentNode: ITreeNode = null;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
index 486ac93c0..b03d37f50 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
@@ -16,7 +16,6 @@ import {AvailableNodeIcons} from "../../../available-models-tree/available-model
 import {DuplicateVnfComponent} from "../../../duplicate/duplicate-vnf.component";
 import {changeInstanceCounter, removeInstance} from "../../../../../shared/storeUtil/utils/general/general.actions";
 import {IframeService} from "../../../../../shared/utils/iframe.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {DuplicateService} from "../../../duplicate/duplicate.service";
 import {ServiceInstanceActions} from "../../../../../shared/models/serviceInstanceActions";
 import {deleteActionNetworkInstance, undoDeleteActionNetworkInstance, updateNetworkPosition} from "../../../../../shared/storeUtil/utils/network/network.actions";
@@ -24,6 +23,7 @@ import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config";
 import {ComponentInfoType} from "../../../component-info/component-info-model";
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../../../shared/components/customModal/services/modal.service";
 
 export class NetworkModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
@@ -31,7 +31,7 @@ export class NetworkModelInfo implements ILevelNodeInfo {
               private _dialogService: DialogService,
               private _networkPopupService: NetworkPopupService,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _iframeService: IframeService,
               private _featureFlagsService: FeatureFlagsService,
               private _store: NgRedux<AppState>) {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
index 355b5c597..c3c33a1be 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
@@ -31,6 +31,7 @@ import {ComponentInfoService} from "../../../component-info/component-info.servi
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
 import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../../../shared/components/customModal/services/modal.service";
 
 export class VnfModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
@@ -41,7 +42,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
               private _vfModulePopupService: VfModulePopupService,
               private _vfModuleUpgradePopupService: VfModuleUpgradePopupService,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _iframeService: IframeService,
               private _componentInfoService: ComponentInfoService,
               private _featureFlagsService: FeatureFlagsService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
index 1cec62b2c..1ba9a239c 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
@@ -27,13 +27,15 @@ import {VfModuleControlGenerator} from "../../../../shared/components/genericFor
 import {VnfGroupPopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {VnfGroupControlGenerator} from "../../../../shared/components/genericForm/formControlsServices/vnfGroupGenerator/vnfGroup.control.generator";
 import {DuplicateService} from "../../duplicate/duplicate.service";
-import {SdcUiComponentsModule, SdcUiServices} from "onap-ui-angular";
+import {SdcUiComponentsModule} from "onap-ui-angular";
 import {ErrorMsgService} from "../../../../shared/components/error-msg/error-msg.service";
 import {ComponentInfoService} from "../../component-info/component-info.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -86,9 +88,11 @@ describe('Model Tree Generator service', () => {
         DialogService,
         ErrorMsgService,
         ComponentInfoService,
-        SdcUiServices.ModalService,
+        ModalService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         { provide: NgRedux, useClass: MockAppStore },
         MockNgRedux]
     });
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
index 0f7bf9a61..ec6f2a4c5 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
@@ -37,6 +37,8 @@ import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
 import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -112,6 +114,8 @@ describe('Model Tree Generator service', () => {
         ComponentInfoService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         SharedControllersService,
         {provide: NgRedux, useClass: MockAppStore},
         MockNgRedux ]
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
index 9b68627e2..8eef4a08d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
@@ -15,7 +15,6 @@ import {VfModulePopupService} from "../../../shared/components/genericFormPopup/
 import {VnfGroupingModelInfo} from "./models/vnfGrouping/vnfGrouping.model.info";
 import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {DuplicateService} from "../duplicate/duplicate.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {IframeService} from "../../../shared/utils/iframe.service";
 import {ComponentInfoService} from "../component-info/component-info.service";
 import {PnfModelInfo} from "./models/pnf/pnf.model.info";
@@ -26,6 +25,7 @@ import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step
 import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import { VfModuleUpgradePopupService } from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Injectable()
 export class ObjectToTreeService {
@@ -39,7 +39,7 @@ export class ObjectToTreeService {
               private _vfModuleUpgradePopupService : VfModuleUpgradePopupService,
               private _vnfGroupPopupService : VnfGroupPopupService,
               private _duplicateService : DuplicateService,
-              private _modalService: SdcUiServices.ModalService,
+              private _modalService: ModalService,
               private _iframeService : IframeService,
               private _componentInfoService : ComponentInfoService,
               private _networkStepService : NetworkStepService,
@@ -50,8 +50,6 @@ export class ObjectToTreeService {
   }
 
 
-
-
   /***********************************************************
    * return all first optional first level of the model tree
    ************************************************************/
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
index 3a65b93ef..f89950c61 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
@@ -42,6 +42,8 @@ import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service";
 import {VfModuleUpgradePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -114,6 +116,8 @@ describe('Shared Tree Service', () => {
         ComponentInfoService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         {provide: NgRedux, useClass: MockAppStore}
       ]
     });
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
index cbe8445ca..59988f7c3 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
@@ -26,8 +26,8 @@ export class ServicePlanningComponent implements OnInit {
   }
 
   pageMode: DrawingBoardModes = DrawingBoardModes.CREATE;
-  @ViewChild(DrawingBoardTreeComponent) drawingModelTree;
-  @ViewChild(AvailableModelsTreeComponent) availableModelTree;
+  @ViewChild(DrawingBoardTreeComponent, {static: false}) drawingModelTree;
+  @ViewChild(AvailableModelsTreeComponent, {static: false}) availableModelTree;
 
   isShowTree(): boolean {
     return true;