fix: registered external resouces should keep singleton ref

- external resources can be provided through the grid options, but these options are sometime deep copied and that might have the side effect of losing the singleton ref of the instantiate services/resources, instead we can simply keep these singleton refs before any grid options merge can happen and that is in the constructor before the grid initializes and before the grid options are merged and sometime deep copied with global options

Author: ghiscoding

src/app/examples/grid-clientside.component.ts

@@ -196,7 +196,7 @@ export class GridClientSideComponent implements OnInit {
           { columnId: 'complete', direction: 'ASC' }
         ],
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     };
 
     // mock a dataset

src/app/examples/grid-colspan.component.ts

@@ -68,7 +68,7 @@ export class GridColspanComponent implements OnInit {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     };
 
     this.dataset1 = this.getData(500);
@@ -100,7 +100,7 @@ export class GridColspanComponent implements OnInit {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
     };
 
     this.dataset2 = this.getData(500);

src/app/examples/grid-composite-editor.component.ts

@@ -394,7 +394,7 @@ export class GridCompositeEditorComponent implements OnInit {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService(), this.compositeEditorInstance],
+      externalResources: [new ExcelExportService(), this.compositeEditorInstance],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)

src/app/examples/grid-contextmenu.component.ts

@@ -297,7 +297,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
         columnHeaderStyle: { font: { bold: true, italic: true } }
       },
       i18n: this.translate,
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
 
       enableContextMenu: true,
       enableCellMenu: true,

src/app/examples/grid-custom-tooltip.component.ts

@@ -323,7 +323,7 @@ export class GridCustomTooltipComponent implements OnInit {
         exportWithFormatter: true
       },
       // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins)
-      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
       customTooltip: {
         formatter: this.tooltipFormatter.bind(this) as Formatter,
         headerFormatter: this.headerFormatter,

src/app/examples/grid-draggrouping.component.ts

@@ -244,7 +244,7 @@ export class GridDraggableGroupingComponent implements OnInit {
       enableTextExport: true,
       enableExcelExport: true,
       excelExportOptions: { sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.loadData(500);

src/app/examples/grid-graphql.component.ts

@@ -276,7 +276,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.graphqlQuery = this.angularGrid.backendService!.buildQuery();
         if (this.isWithCursor) {
-          // When using cursor pagination, the pagination service needs to updated with the PageInfo data from the latest request
+          // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request
           // This might be done automatically if using a framework specific slickgrid library
           // Note because of this timeout, this may cause race conditions with rapid clicks!
           this.angularGrid?.paginationService?.setCursorPageInfo((mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo));

src/app/examples/grid-grouping.component.ts

@@ -165,7 +165,7 @@ export class GridGroupingComponent implements OnInit {
       },
       excelExportOptions: { sanitizeDataExport: true },
       textExportOptions: { sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.loadData(500);

src/app/examples/grid-localization.component.ts

@@ -202,7 +202,7 @@ export class GridLocalizationComponent implements OnInit, OnDestroy {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
-      registerExternalResources: [this.excelExportService, this.textExportService],
+      externalResources: [this.excelExportService, this.textExportService],
     };
 
     this.loadData(NB_ITEMS);

src/app/examples/grid-range.component.ts

@@ -184,7 +184,7 @@ export class GridRangeComponent implements OnInit, OnDestroy {
           { columnId: 'duration', direction: 'ASC' },
         ],
       },
-      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
+      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
     };
 
     // mock a dataset

src/app/examples/grid-resize-by-content.component.ts

@@ -327,7 +327,7 @@ export class GridResizeByContentComponent implements OnInit {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       enableRowSelection: true,
       enableCheckboxSelector: true,

src/app/examples/grid-tree-data-hierarchical.component.ts

@@ -128,7 +128,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
       multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it

src/app/examples/grid-tree-data-parent-child.component.ts

@@ -108,7 +108,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
       enableAutoResize: true,
       enableExcelExport: true,
       excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
-      registerExternalResources: [new ExcelExportService()],
+      externalResources: [new ExcelExportService()],
       enableFiltering: true,
       showCustomFooter: true, // display some metrics in the bottom custom footer
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts

@@ -973,7 +973,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         const sortServiceSpy = jest.spyOn(sortServiceStub, 'addRxJsResource');
         const paginationServiceSpy = jest.spyOn(paginationServiceStub, 'addRxJsResource');
 
-        component.gridOptions = { registerExternalResources: [rxjsMock] } as unknown as GridOption;
+        component.gridOptions = { externalResources: [rxjsMock] } as unknown as GridOption;
+        component.registerExternalResources([rxjsMock], true);
         component.initialization(slickEventHandler);
 
         expect(backendUtilitySpy).toHaveBeenCalled();
@@ -1253,7 +1254,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         jest.spyOn((component.gridOptions as any).backendServiceApi.service, 'buildQuery').mockReturnValue(query);
         const backendExecuteSpy = jest.spyOn(backendUtilityServiceStub, 'executeBackendProcessesCallback');
 
-        component.gridOptions.registerExternalResources = [rxjsMock];
+        component.gridOptions.externalResources = [rxjsMock];
+        component.registerExternalResources([rxjsMock], true);
         component.gridOptions.backendServiceApi!.service.options = { executeProcessCommandOnInit: true };
         component.initialization(slickEventHandler);
 
@@ -1328,7 +1330,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         jest.spyOn(component.gridOptions.backendServiceApi!.service, 'buildQuery').mockReturnValue(query);
         const backendErrorSpy = jest.spyOn(backendUtilityServiceStub, 'onBackendError');
 
-        component.gridOptions.registerExternalResources = [rxjsMock];
+        component.gridOptions.externalResources = [rxjsMock];
+        component.resetExternalResources();
+        component.registerExternalResources([rxjsMock], true);
         component.gridOptions.backendServiceApi!.service.options = { executeProcessCommandOnInit: true };
         component.initialization(slickEventHandler);