NativeScript / NativeScript/angular
NgOnDestroy no longer being called when navigating to another route
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 55
- Forks
- 13
- Avg merge
- 16m
- Merged PRs (30d)
- 1
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named. Start by reproducing navigation among /scan, /device-logs, and /settings, then trace PageRouterOutlet, nsRouterLink, and the route-reuse strategy logs to compare detaching with component destruction. Done means the lifecycle behavior is consistent and covered by a regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100