{"record":{"id":"b16614ff7ab84800","repo":"ionic-team/ionic-framework","slug":"incompatible-reuse-strategy","errorCode":null,"errorMessage":"incompatible reuse strategy","messagePattern":"incompatible reuse strategy","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/angular/common/src/directives/navigation/router-outlet.ts","lineNumber":190,"sourceCode":"  get activatedRoute(): ActivatedRoute {\n    if (!this.activated) {\n      throw new Error('Outlet is not activated');\n    }\n    return this._activatedRoute as ActivatedRoute;\n  }\n\n  get activatedRouteData(): Data {\n    if (this._activatedRoute) {\n      return this._activatedRoute.snapshot.data;\n    }\n    return {};\n  }\n\n  /**\n   * Called when the `RouteReuseStrategy` instructs to detach the subtree\n   */\n  detach(): ComponentRef<any> {\n    throw new Error('incompatible reuse strategy');\n  }\n\n  /**\n   * Called when the `RouteReuseStrategy` instructs to re-attach a previously detached subtree\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  attach(_ref: ComponentRef<any>, _activatedRoute: ActivatedRoute): void {\n    throw new Error('incompatible reuse strategy');\n  }\n\n  deactivate(): void {\n    if (this.activated) {\n      if (this.activatedView) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const context = this.getContext()!;\n        this.activatedView.savedData = new Map(context.children['contexts']);\n\n        /**","sourceCodeStart":172,"sourceCodeEnd":208,"githubUrl":"https://github.com/ionic-team/ionic-framework/blob/625f9c38ad8c5db8a6c12df5c1622a36da90f9e3/packages/angular/common/src/directives/navigation/router-outlet.ts#L172-L208","documentation":"Thrown by IonRouterOutlet.detach(). Ionic's outlet deliberately does not implement Angular's RouteReuseStrategy detach/attach lifecycle because it maintains its own navigation stack for page transitions. Calling detach is treated as an incompatible reuse strategy and fails immediately. The message is the contract: do not use a reuse strategy that detaches this outlet.","triggerScenarios":"An Angular RouteReuseStrategy (custom or from a library) calls outlet.detach() - typically because shouldDetachRoute returned true. Any strategy that tries to lift the outlet's subtree out for reuse triggers it.","commonSituations":"Adding a custom RouteReuseStrategy for tab caching or 'back navigation' preservation that detaches routes; using a third-party reuse-strategy library globally; following a generic Angular tutorial that enables detachment without scoping it away from ion-router-outlet.","solutions":["Do not use a RouteReuseStrategy that detaches; Ionic already caches pages in its stack.","If you must use one, scope shouldDetach/shouldAttach to return false for routes rendered by ion-router-outlet.","Remove or replace the global custom reuse strategy with Ionic's NavController-based stacking.","If you need scroll/state preservation, use Ionic's ion-page lifecycle events instead of route reuse."],"exampleFix":"// before\n@Injectable()\nexport class MyReuseStrategy extends RouteReuseStrategy {\n  shouldDetach(): boolean { return true; } // forces detach() on ion-router-outlet\n}\n\n// after\nshouldDetach(route: ActivatedRouteSnapshot): boolean {\n  // never detach routes inside ion-router-outlet\n  return false;\n}","handlingStrategy":"fallback","validationCode":"@Injectable()\nclass SafeReuseStrategy extends RouteReuseStrategy {\n  shouldDetach(): boolean { return false; }      // never detach ion-router-outlet\n  shouldAttach(): boolean { return false; }\n  retrieve(): DetachedRouteHandle | null { return null; }\n  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {\n    return future.routeConfig === curr.routeConfig;\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Avoid RouteReuseStrategy strategies that detach; Ionic stacks pages itself.","Scope any reuse strategy to return false for ion-router-outlet routes.","Use Ionic page lifecycle hooks for state preservation."],"tags":["angular","router","router-outlet","route-reuse-strategy","runtime"],"backgroundTag":null,"analyzedSha":"625f9c38ad8c5db8a6c12df5c1622a36da90f9e3","analyzedAt":"2026-08-12T16:00:25.413Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}