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 87ad976491..c9a852ae08 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,11 +1,11 @@
 import { Component, Injector, Optional, SkipSelf, Type } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import { LocalizationService } from '../services/localization.service';
 import { ReplaceableComponentsService } from '../services/replaceable-components.service';
+import { RouterEvents } from '../services/router-events.service';
 import { RoutesService } from '../services/routes.service';
 import { SubscriptionService } from '../services/subscription.service';
 import { findRoute, getRoutePath } from '../utils/route-utils';
@@ -44,6 +44,7 @@ export class DynamicLayoutComponent {
     private localizationService: LocalizationService,
     private replaceableComponents: ReplaceableComponentsService,
     private subscription: SubscriptionService,
+    private routerEvents: RouterEvents,
     @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
   ) {
     if (dynamicLayoutComponent) return;
@@ -52,16 +53,16 @@ export class DynamicLayoutComponent {
     this.routes = injector.get(RoutesService);
 
     this.getLayout();
-    this.subscription.addOne(
-      this.router.events.pipe(filter(event => event instanceof NavigationEnd)),
-      () => {
-        this.getLayout();
-      },
-    );
+    this.checkLayoutOnNavigationEnd();
 
     this.listenToLanguageChange();
   }
 
+  private checkLayoutOnNavigationEnd() {
+    const navigationEnd$ = this.routerEvents.getNavigationEvents('End');
+    this.subscription.addOne(navigationEnd$, () => this.getLayout());
+  }
+
   private getLayout() {
     let expectedLayout = (this.route.snapshot.data || {}).layout;
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
index 11270c6dc1..441dc33ec8 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
@@ -1,7 +1,14 @@
-import { ABP, getRoutePath, RoutesService, TreeNode, SubscriptionService } from '@abp/ng.core';
+import {
+  ABP,
+  getRoutePath,
+  NavigationEvents,
+  RoutesService,
+  SubscriptionService,
+  TreeNode,
+} from '@abp/ng.core';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { filter, map, startWith } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { map, startWith } from 'rxjs/operators';
 import { eThemeSharedRouteNames } from '../../enums';
 
 @Component({
@@ -18,12 +25,12 @@ export class BreadcrumbComponent implements OnInit {
     private router: Router,
     private routes: RoutesService,
     private subscription: SubscriptionService,
+    private navigationEvents: NavigationEvents,
   ) {}
 
   ngOnInit(): void {
     this.subscription.addOne(
-      this.router.events.pipe(
-        filter<NavigationEnd>(event => event instanceof NavigationEnd),
+      this.navigationEvents.getOneOf('End').pipe(
         // tslint:disable-next-line:deprecation
         startWith(null),
         map(() => this.routes.search({ path: getRoutePath(this.router) })),
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
index 97f9533cf7..1835b80eef 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
@@ -1,4 +1,4 @@
-import { AuthService, LocalizationParam, RestOccurError } from '@abp/ng.core';
+import { AuthService, LocalizationParam, RestOccurError, RouterEvents } from '@abp/ng.core';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   ApplicationRef,
@@ -10,7 +10,7 @@ import {
   Injector,
   RendererFactory2,
 } from '@angular/core';
-import { NavigationError, ResolveEnd, Router } from '@angular/router';
+import { NavigationError, ResolveEnd } from '@angular/router';
 import { Actions, ofActionSuccessful } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -72,7 +72,7 @@ export class ErrorHandler {
 
   constructor(
     private actions: Actions,
-    private router: Router,
+    private routerEvents: RouterEvents,
     private confirmationService: ConfirmationService,
     private cfRes: ComponentFactoryResolver,
     private rendererFactory: RendererFactory2,
@@ -85,20 +85,16 @@ export class ErrorHandler {
   }
 
   private listenToRouterError() {
-    this.router.events
-      .pipe(
-        filter(event => event instanceof NavigationError),
-        filter(this.filterRouteErrors),
-      )
+    this.routerEvents
+      .getNavigationEvents('Error')
+      .pipe(filter(this.filterRouteErrors))
       .subscribe(() => this.show404Page());
   }
 
   private listenToRouterDataResolved() {
-    this.router.events
-      .pipe(
-        filter(event => event instanceof ResolveEnd),
-        filter(() => !!this.componentRef),
-      )
+    this.routerEvents
+      .getEvents(ResolveEnd)
+      .pipe(filter(() => !!this.componentRef))
       .subscribe(() => {
         this.componentRef.destroy();
         this.componentRef = null;