diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts
new file mode 100644
index 0000000000..bd24bd84d2
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts
@@ -0,0 +1,12 @@
+import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+
+@Component({
+  selector: 'abp-modal-container',
+  template: `
+    <ng-container #container></ng-container>
+  `,
+})
+export class ModalContainerComponent {
+  @ViewChild('container', { static: true, read: ViewContainerRef })
+  container: ViewContainerRef;
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts
new file mode 100644
index 0000000000..4ee654e9bd
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts
@@ -0,0 +1,34 @@
+import { Component, ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { ModalContainerComponent } from '../components/modal/modal-container.component';
+
+describe('ModalContainerComponent', () => {
+  @Component({ template: '<div class="foo">bar</div>' })
+  class TestComponent {}
+
+  let componentRef: ComponentRef<TestComponent>;
+  let spectator: Spectator<ModalContainerComponent>;
+
+  const createComponent = createComponentFactory({
+    component: ModalContainerComponent,
+    entryComponents: [TestComponent],
+  });
+
+  beforeEach(() => (spectator = createComponent()));
+
+  afterEach(() => componentRef.destroy());
+
+  describe('#container', () => {
+    it('should be a ViewContainerRef', () => {
+      let foo = document.querySelector('div.foo');
+      expect(foo).toBeNull();
+
+      const cfResolver = spectator.get(ComponentFactoryResolver);
+      const factory = cfResolver.resolveComponentFactory(TestComponent);
+      componentRef = spectator.component.container.createComponent(factory);
+
+      foo = document.querySelector('div.foo');
+      expect(foo.textContent).toBe('bar');
+    });
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 15ba212944..f23410d6d0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -1,4 +1,4 @@
-import { CoreModule, noop, LazyLoadService } from '@abp/ng.core';
+import { CoreModule, LazyLoadService, noop } from '@abp/ng.core';
 import { DatePipe } from '@angular/common';
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
@@ -9,23 +9,24 @@ import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
+import { LoadingComponent } from './components/loading/loading.component';
+import { ModalContainerComponent } from './components/modal/modal-container.component';
 import { ModalComponent } from './components/modal/modal.component';
+import { PaginationComponent } from './components/pagination/pagination.component';
 import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component';
 import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component';
-import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { TableComponent } from './components/table/table.component';
+import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { ToastComponent } from './components/toast/toast.component';
 import styles from './constants/styles';
+import { LoadingDirective } from './directives/loading.directive';
 import { TableSortDirective } from './directives/table-sort.directive';
 import { ErrorHandler } from './handlers/error.handler';
 import { RootParams } from './models/common';
+import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { chartJsLoaded$ } from './utils/widget-utils';
-import { PaginationComponent } from './components/pagination/pagination.component';
-import { LoadingComponent } from './components/loading/loading.component';
-import { LoadingDirective } from './directives/loading.directive';
-import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 
 /**
  *
@@ -54,6 +55,7 @@ export function appendScript(injector: Injector) {
     LoaderBarComponent,
     LoadingComponent,
     ModalComponent,
+    ModalContainerComponent,
     PaginationComponent,
     TableComponent,
     TableEmptyMessageComponent,
@@ -81,7 +83,7 @@ export function appendScript(injector: Injector) {
     TableSortDirective,
   ],
   providers: [DatePipe],
-  entryComponents: [HttpErrorWrapperComponent, LoadingComponent],
+  entryComponents: [HttpErrorWrapperComponent, LoadingComponent, ModalContainerComponent],
 })
 export class ThemeSharedModule {
   constructor(private errorHandler: ErrorHandler) {}