diff --git a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts b/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts
index 719de83566..a55b815064 100644
--- a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts
+++ b/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts
@@ -1,9 +1,9 @@
-import { Injectable, Inject, InjectionToken, Type } from '@angular/core';
-import { NgxsPlugin, setValue, actionMatcher, InitState, UpdateState, NgxsNextPluginFn } from '@ngxs/store';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
 import { Router, Routes } from '@angular/router';
-import { ABP } from '../models';
+import { actionMatcher, InitState, NgxsNextPluginFn, NgxsPlugin, setValue, UpdateState } from '@ngxs/store';
 import snq from 'snq';
-import { setChildRoute, sortRoutes, organizeRoutes } from '../utils/route-utils';
+import { ABP } from '../models';
+import { organizeRoutes } from '../utils/route-utils';
 
 export const NGXS_CONFIG_PLUGIN_OPTIONS = new InjectionToken('NGXS_CONFIG_PLUGIN_OPTIONS');
 
@@ -45,7 +45,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a
   wrappers = abpRoutes.filter(ar => ar.wrapper);
   const transformed = [] as ABP.FullRoute[];
   routes
-    .filter(route => route.component || route.loadChildren)
+    .filter(route => route.component || route.loadChildren || (route.data || {}).routes)
     .forEach(route => {
       const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase());
       const { length } = transformed;
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
index 969f41fa1c..0aebd0927b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
@@ -8,8 +8,12 @@
   </div>
 </nav>
 
-<div style="padding-top: 5rem;" class="container">
-  <router-outlet></router-outlet>
+<div
+  [@routeAnimations]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path"
+  style="padding-top: 5rem;"
+  class="container"
+>
+  <router-outlet #outlet="outlet"></router-outlet>
 </div>
 
 <abp-confirmation></abp-confirmation>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
index cc2113d31a..8e5fddcc46 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { slideFromBottom } from '@abp/ng.theme.shared';
 
 @Component({
   selector: ' abp-layout',
   templateUrl: './layout.component.html',
+  animations: [slideFromBottom],
 })
 export class LayoutComponent {
   isCollapsed: boolean = false;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
index 0e7d017edd..ece1288c7a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts
@@ -2,12 +2,12 @@ import { MessageService } from 'primeng/components/common/messageservice';
 import { Observable, Subject } from 'rxjs';
 import { Toaster } from '../models/toaster';
 
-export class AbstractToasterClass<T = Toaster.Options> {
-  protected status$: Subject<Toaster.Status>;
+export class AbstractToaster<T = Toaster.Options> {
+  status$: Subject<Toaster.Status>;
 
-  protected key: string = 'abpToast';
+  key: string = 'abpToast';
 
-  protected sticky: boolean = false;
+  sticky: boolean = false;
 
   constructor(protected messageService: MessageService) {}
   info(message: string, title: string, options?: T): Observable<Toaster.Status> {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
new file mode 100644
index 0000000000..6fd1d939c4
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
@@ -0,0 +1 @@
+export * from './slide.animation';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts
new file mode 100644
index 0000000000..90f46662be
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts
@@ -0,0 +1,6 @@
+import { animate, state, style, transition, trigger, query } from '@angular/animations';
+export const slideFromBottom = trigger('routeAnimations', [
+  state('void', style({ 'margin-top': '20px', opacity: '0' })),
+  state('*', style({ 'margin-top': '0px', opacity: '1' })),
+  transition(':enter', [animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' }))]),
+]);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index 607350879f..8387246db3 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -1,9 +1,8 @@
 <div
+  *ngIf="showModal"
   id="abp-modal"
   tabindex="-1"
-  class="modal fade {{ modalClass }}"
-  [class.show]="visible"
-  [style.display]="visible ? 'block' : 'none'"
+  class="modal fade {{ modalClass }} d-block show"
   [style.padding-right.px]="'15'"
 >
   <div
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 1e53e7dce1..b4beff5ec7 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,8 +27,13 @@ export class ModalComponent implements OnDestroy {
     return this._visible;
   }
   set visible(value: boolean) {
+    if (typeof value !== 'boolean') return;
+
     if (!this.modalContent) {
-      setTimeout(() => (this.visible = value), 0);
+      setTimeout(() => {
+        this.showModal = value;
+        this.visible = value;
+      }, 0);
       return;
     }
 
@@ -40,7 +45,7 @@ export class ModalComponent implements OnDestroy {
       this.renderer.addClass(this.modalContent.nativeElement, 'fade-out-top');
       setTimeout(() => {
         this.setVisible(value);
-        this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
+        // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
         this.ngOnDestroy();
       }, 350);
     }
@@ -66,10 +71,12 @@ export class ModalComponent implements OnDestroy {
 
   _visible: boolean = false;
 
-  closable: boolean = false;
+  showModal: boolean = false;
 
   isOpenConfirmation: boolean = false;
 
+  closable: boolean = false;
+
   destroy$ = new Subject<void>();
 
   constructor(private renderer: Renderer2, private confirmationService: ConfirmationService) {}
@@ -81,6 +88,8 @@ export class ModalComponent implements OnDestroy {
   setVisible(value: boolean) {
     this._visible = value;
     this.visibleChange.emit(value);
+    this.showModal = value;
+
     value
       ? timer(500)
           .pipe(take(1))
@@ -93,14 +102,16 @@ export class ModalComponent implements OnDestroy {
       .pipe(
         debounceTime(350),
         takeUntil(this.destroy$),
-        filter(
-          (event: MouseEvent) =>
+        filter((event: MouseEvent) => {
+          const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem');
+          return (
             event &&
             this.closable &&
             this.modalContent &&
-            !this.isOpenConfirmation &&
-            !this.modalContent.nativeElement.contains(event.target),
-        ),
+            !isOpenConfirmation &&
+            !this.modalContent.nativeElement.contains(event.target)
+          );
+        }),
       )
       .subscribe(_ => {
         this.close();
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
index dd70e696e2..f0376dc038 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { AbstractToasterClass } from '../abstracts/toaster';
+import { AbstractToaster } from '../abstracts/toaster';
 import { Confirmation } from '../models/confirmation';
 
 @Injectable({ providedIn: 'root' })
-export class ConfirmationService extends AbstractToasterClass<Confirmation.Options> {
-  protected key: string = 'abpConfirmation';
+export class ConfirmationService extends AbstractToaster<Confirmation.Options> {
+  key: string = 'abpConfirmation';
 
-  protected sticky: boolean = true;
+  sticky: boolean = true;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
index 74845b9e9c..00cf9c725f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { AbstractToasterClass } from '../abstracts/toaster';
+import { AbstractToaster } from '../abstracts/toaster';
 import { Message } from 'primeng/components/common/message';
 
 @Injectable({ providedIn: 'root' })
-export class ToasterService extends AbstractToasterClass {
+export class ToasterService extends AbstractToaster {
   addAll(messages: Message[]): void {
     this.messageService.addAll(messages.map(message => ({ key: this.key, ...message })));
   }
diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts
index b7f52bc3f0..6a9eae0f64 100644
--- a/npm/ng-packs/packages/theme-shared/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts
@@ -3,6 +3,7 @@
  */
 
 export * from './lib/theme-shared.module';
+export * from './lib/animations';
 export * from './lib/components';
 export * from './lib/models';
 export * from './lib/services';
diff --git a/npm/ng-packs/scripts/build.js b/npm/ng-packs/scripts/build.js
index 6b21c48e0f..ddd5de2663 100644
--- a/npm/ng-packs/scripts/build.js
+++ b/npm/ng-packs/scripts/build.js
@@ -35,4 +35,6 @@ import fse from 'fs-extra';
       cwd: '../',
     });
   });
+
+  process.exit(0);
 })();
diff --git a/npm/ng-packs/scripts/sync.js b/npm/ng-packs/scripts/sync.js
index 366057bf8e..a212995cb3 100644
--- a/npm/ng-packs/scripts/sync.js
+++ b/npm/ng-packs/scripts/sync.js
@@ -1,5 +1,4 @@
 // ESM syntax is supported.
-import execa from 'execa';
 import fse from 'fs-extra';
 
 (async () => {
@@ -21,4 +20,6 @@ import fse from 'fs-extra';
 
     await fse.writeJSON(srcPackagePath, { ...srcPackage, version }, { spaces: 2 });
   });
+
+  process.exit(0);
 })();
diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts
index 6e89cd41a5..bf2a27962a 100644
--- a/templates/app/angular/src/app/app.component.ts
+++ b/templates/app/angular/src/app/app.component.ts
@@ -7,6 +7,4 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
 })
-export class AppComponent {
-  title = 'myProjectName';
-}
+export class AppComponent {}