diff --git a/npm/ng-packs/packages/core/src/lib/actions/replaceable-components.actions.ts b/npm/ng-packs/packages/core/src/lib/actions/replaceable-components.actions.ts
index 8df6a384ad..a800ab858a 100644
--- a/npm/ng-packs/packages/core/src/lib/actions/replaceable-components.actions.ts
+++ b/npm/ng-packs/packages/core/src/lib/actions/replaceable-components.actions.ts
@@ -1,7 +1,8 @@
 import { ReplaceableComponents } from '../models/replaceable-components';
 
+// tslint:disable: max-line-length
 /**
- * @see usage: https://github.com/abpframework/abp/pull/2522#issue-358333183
+ * @deprecated To be deleted in v4.0. Use ReplaceableComponentsService instead. See the doc (https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement)
  */
 export class AddReplaceableComponent {
   static readonly type = '[ReplaceableComponents] Add';
diff --git a/npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts b/npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts
index 82096c5472..e5caa9f95b 100644
--- a/npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts
+++ b/npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts
@@ -1,11 +1,14 @@
-import { Injectable, NgZone } from '@angular/core';
-import { Router } from '@angular/router';
+import { Injectable } from '@angular/core';
 import { Action, createSelector, Selector, State, StateContext } from '@ngxs/store';
 import snq from 'snq';
 import { AddReplaceableComponent } from '../actions/replaceable-components.actions';
 import { ReplaceableComponents } from '../models/replaceable-components';
-import { noop } from '../utils/common-utils';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 
+// tslint:disable: max-line-length
+/**
+ * @deprecated To be deleted in v4.0. Use ReplaceableComponentsService instead. See the doc (https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement)
+ */
 @State<ReplaceableComponents.State>({
   name: 'ReplaceableComponentsState',
   defaults: { replaceableComponents: [] } as ReplaceableComponents.State,
@@ -30,23 +33,7 @@ export class ReplaceableComponentsState {
     return selector;
   }
 
-  constructor(private ngZone: NgZone, private router: Router) {}
-
-  // TODO: Create a shared service for route reload and more
-  private reloadRoute() {
-    const { shouldReuseRoute } = this.router.routeReuseStrategy;
-    const setRouteReuse = (reuse: typeof shouldReuseRoute) => {
-      this.router.routeReuseStrategy.shouldReuseRoute = reuse;
-    };
-
-    setRouteReuse(() => false);
-    this.router.navigated = false;
-
-    this.ngZone.run(async () => {
-      await this.router.navigateByUrl(this.router.url).catch(noop);
-      setRouteReuse(shouldReuseRoute);
-    });
-  }
+  constructor(private service: ReplaceableComponentsService) {}
 
   @Action(AddReplaceableComponent)
   replaceableComponentsAction(
@@ -69,6 +56,7 @@ export class ReplaceableComponentsState {
       replaceableComponents,
     });
 
-    if (reload) this.reloadRoute();
+    console.log(this.service);
+    this.service.add(payload, reload);
   }
 }