diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index f587e8fe78..47694386d3 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -27,6 +27,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
   templateUrl: './modal.component.html',
   animations: [fadeAnimation],
   styleUrls: ['./modal.component.scss'],
+  providers: [ModalService],
 })
 export class ModalComponent implements OnDestroy {
   @Input()
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/modal.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/modal.service.ts
index ac481f68ea..de63164810 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/modal.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/modal.service.ts
@@ -1,11 +1,11 @@
 import { ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core';
-import { ComponentRef, Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ComponentRef, Injectable, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
 import { ModalContainerComponent } from '../components/modal/modal-container.component';
 
 @Injectable({
   providedIn: 'root',
 })
-export class ModalService {
+export class ModalService implements OnDestroy {
   private containerComponentRef: ComponentRef<ModalContainerComponent>;
 
   constructor(private contentProjectionService: ContentProjectionService) {
@@ -44,4 +44,8 @@ export class ModalService {
 
     this.contentProjectionService.projectContent(strategy);
   }
+
+  ngOnDestroy() {
+    this.containerComponentRef.destroy();
+  }
 }