diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index 939fff173e..61846ad126 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, Optional, SkipSelf, Type } from '@angular/core';
+import { Component, Injector, isDevMode, Optional, SkipSelf, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
@@ -13,13 +13,7 @@ import { TreeNode } from '../utils/tree-utils';
 
 @Component({
   selector: 'abp-dynamic-layout',
-  template: `
-    <ng-container *ngTemplateOutlet="layout ? componentOutlet : routerOutlet"></ng-container>
-    <ng-template #routerOutlet><router-outlet></router-outlet></ng-template>
-    <ng-template #componentOutlet
-      ><ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container
-    ></ng-template>
-  `,
+  template: ` <ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container> `,
   providers: [SubscriptionService],
 })
 export class DynamicLayoutComponent {
@@ -47,7 +41,10 @@ export class DynamicLayoutComponent {
     private routerEvents: RouterEvents,
     @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
   ) {
-    if (dynamicLayoutComponent) return;
+    if (dynamicLayoutComponent) {
+      if (isDevMode) console.warn('DynamicLayoutComponent must be used only in AppComponent.');
+      return;
+    }
     this.route = injector.get(ActivatedRoute);
     this.router = injector.get(Router);
     this.routes = injector.get(RoutesService);