diff --git a/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts b/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts
index b0ecc3dff..6a8517f46 100644
--- a/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts
+++ b/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts
@@ -254,10 +254,6 @@ export class AureliaSlickgridCustomElement {
       throw new Error('Using `<aurelia-slickgrid>` requires `grid-options.bind` and `column-definitions.bind`, it seems that you might have forgot to provide them since at least of them is undefined.');
     }
 
-    // save resource refs to register before the grid options are merged and possibly deep copied
-    // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton
-    this._registeredResources = this.gridOptions?.externalResources || [];
-
     this._eventHandler = new SlickEventHandler();
     this.initialization(this._eventHandler);
     this._isGridInitialized = true;
@@ -1341,6 +1337,8 @@ export class AureliaSlickgridCustomElement {
 
   /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource & RowDetail) */
   protected preRegisterResources() {
+    this._registeredResources = this.gridOptions?.externalResources || [];
+
     // bind & initialize all Components/Services that were tagged as enabled
     // register all services by executing their init method and providing them with the Grid object
     if (Array.isArray(this._registeredResources)) {
@@ -1351,7 +1349,7 @@ export class AureliaSlickgridCustomElement {
       }
     }
 
-    if (this.gridOptions.enableRowDetailView) {
+    if (this.gridOptions.enableRowDetailView && !this._registeredResources.some(r => r instanceof SlickRowDetailView)) {
       this.slickRowDetailView = new SlickRowDetailView(this.aureliaUtilService, this._eventPubSubService, this.elm as HTMLElement);
       this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions);
       this._registeredResources.push(this.slickRowDetailView);
@@ -1366,15 +1364,20 @@ export class AureliaSlickgridCustomElement {
     }
 
     // push all other Services that we want to be registered
-    this._registeredResources.push(this.gridService, this.gridStateService);
+    if (!this._registeredResources.some(r => r instanceof GridService)) {
+      this._registeredResources.push(this.gridService);
+    }
+    if (!this._registeredResources.some(r => r instanceof GridStateService)) {
+      this._registeredResources.push(this.gridStateService);
+    }
 
     // when using Grouping/DraggableGrouping/Colspan register its Service
-    if (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping) {
+    if (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping && !this._registeredResources.some(r => r instanceof GroupingAndColspanService)) {
       this._registeredResources.push(this.groupingService);
     }
 
     // when using Tree Data View, register its Service
-    if (this.gridOptions.enableTreeData) {
+    if (this.gridOptions.enableTreeData && !this._registeredResources.some(r => r instanceof TreeDataService)) {
       this._registeredResources.push(this.treeDataService);
     }
 
@@ -1384,8 +1387,10 @@ export class AureliaSlickgridCustomElement {
     }
 
     // also initialize (render) the empty warning component
-    this.slickEmptyWarning = new SlickEmptyWarningComponent();
-    this._registeredResources.push(this.slickEmptyWarning);
+    if (!this._registeredResources.some(r => r instanceof SlickEmptyWarningComponent)) {
+      this.slickEmptyWarning = new SlickEmptyWarningComponent();
+      this._registeredResources.push(this.slickEmptyWarning);
+    }
 
     // bind & initialize all Components/Services that were tagged as enabled
     // register all services by executing their init method and providing them with the Grid object