NgOnDestroy no longer being called when navigating to another route

[JakeAi]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.2.3
• Cross-platform modules: 8.2.1
• Android Runtime: 8.2.2
• iOS Runtime: 8.2.2
• Plugin(s):
• NativeScript-Angular: 13.0.3
• Angular: 13.2.4

Describe the bug

JS: Angular is running in development mode. Call enableProdMode() to enable production mode.
JS: Error: Could not find font file for Font Awesome 5 Pro
JS: light
JS: ns-light
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-router: NSLocationStrategy.replaceState pushing new state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /device-logs, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /device-logs
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: nsRouterLink.tapped: /scan clear: false transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'') result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /device-logs
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: nsRouterLink.tapped: /settings clear: true transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":true,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /settings, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /settings
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._beginPageNavigation clearing states history
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
JS: ns-router: nsRouterLink.tapped: /scan clear: false transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'') result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /settings
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /device-logs, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /device-logs
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()

To Reproduce

Expected behavior If ngOnInit is being called, why wouldn't ngOnDestroy be called? I am using nsRouterLink to navigate to complete different routes.

[edusperoni]

Are you using clearHistory? ngOnDestroy is not called on forward navigation because the component is reused on back navigation.

[JakeAi]

Are you using clearHistory? ngOnDestroy is not called on forward navigation because the component is reused on back navigation.

Everywhere except a couple spots is set to true.

[herefishyfish]

@edusperoni https://github.com/herefishyfish/ngDestroy-bug here's an example of what @JakeAi is experiencing.

Note that ngOnDestroy will get called on the back event to close the app in this scenario.

[JakeAi]

@edusperoni https://github.com/herefishyfish/ngDestroy-bug here's an example of what @JakeAi is experiencing.

Note that ngOnDestroy will get called on the back event to close the app in this scenario.

I can confirm that is what I am seeing and experiencing. Thanks for the reproduction.

[nikoTM]

@edusperoni can confirm. https://github.com/NativeScript/nativescript-angular/issues/2026 is probably related. Would it be possible to publish your fix as a separate version so we can use while waiting for the merge, because my workaround is not perfect. Thanks.

[edusperoni]

Latest alpha contains this fix and a few more, please try that!

[jnorkus]

What is the state of this issue? I've noticed this stopped working after upgrading to Angular 13. Is there a workaround?

[edusperoni]

@jnorkus try installing the latest alpha, as this issue should be fixed there. I think we should move it to stable this week