Angular 9 - Bottom Navigation - Tabs

[MitkoTschimev]

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: 6.7.4
• Cross-platform modules:
• Android Runtime:
• iOS Runtime: 13.5
• Plugin(s):
• NativeScript-Angular: ^9.0.0
• Angular: ^9.1.0

Describe the bug Using angular 9 with BottomNavigation and a tabs (lazy loding modules)

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10784a60e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10788b548 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3   0x10828c222 ffi_closure_unix64_inner
4   0x10828cc4a ffi_closure_unix64
5   0x7fff23d67245 _CFXRegistrationPost1
6   0x7fff23d66fb1 ___CFXNotificationPost_block_invoke
7   0x7fff23e64513 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
8   0x7fff23d66906 _CFXNotificationPost
9   0x7fff2591a26b -[NSNotificationCenter postNotificationName:object:userInfo:]
10  0x7fff48c8419e -[UIApplication _callInitializationDelegatesWithActions:forCanvas:payload:fromOriginatingProcess:]
11  0x7fff48c89bf9 -[UIApplication _runWithMainScene:transitionContext:completion:]
12  0x7fff4839225d -[_UISceneLifecycleMultiplexer completeApplicationLaunchWithFBSScene:transitionContext:]
13  0x7fff4889dcc1 _UIScenePerformActionsWithLifecycleActionMask
14  0x7fff48392d6f __101-[_UISceneLifecycleMultiplexer _evalTransitionToSettings:fromSettings:forceExit:withTransitionStore:]_block_invoke
15  0x7fff4839277e -[_UISceneLifecycleMultiplexer _performBlock:withApplicationOfDeactivationReasons:fromReasons:]
16  0x7fff48392b9c -[_UISceneLifecycleMultiplexer _evalTransitionToSettings:fromSettings:forceExit:withTransitionStore:]
17  0x7fff48392431 -[_UISceneLifecycleMultiplexer uiScene:transitionedFromState:withTransitionContext:]
18  0x7fff48396a22 __186-[_UIWindowSceneFBSSceneTransitionContextDrivenLifecycleSettingsDiffAction _performActionsForUIScene:withUpdatedFBSScene:settingsDiff:fromSettings:transitionContext:lifecycleActionType:]_block_invoke_2
19  0x7fff487b3dad +[BSAnimationSettings(UIKit) tryAnimatingWithSettings:actions:completion:]
20  0x7fff488bc41e _UISceneSettingsDiffActionPerformChangesWithTransitionContext
21  0x7fff4839673d __186-[_UIWindowSceneFBSSceneTransitionContextDrivenLifecycleSettingsDiffAction _performActionsForUIScene:withUpdatedFBSScene:settingsDiff:fromSettings:transitionContext:lifecycleActionType:]_block_invoke
22  0x7fff488bc321 _UISceneSettingsDiffActionPerformActionsWithDelayForTransitionContext
23  0x7fff483965ab -[_UIWindowSceneFBSSceneTransitionContextDrivenLifecycleSettingsDiffAction _performActionsForUIScene:withUpdatedFBSScene:settingsDiff:fromSettings:transitionContext:lifecycleActionType:]
24  0x7fff481eafa8 __64-[UIScene scene:didUpdateWithDiff:transitionContext:completion:]_block_invoke
25  0x7fff481e9b67 -[UIScene _emitSceneSettingsUpdateResponseForCompletion:afterSceneUpdateWork:]
26  0x7fff481eacd2 -[UIScene scene:didUpdateWithDiff:transitionContext:completion:]
27  0x7fff48c88141 -[UIApplication workspace:didCreateScene:withTransitionContext:completion:]
28  0x7fff487da8dc -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:]
29  0x7fff36cacd2e -[FBSSceneImpl _callOutQueue_agent_didCreateWithTransitionContext:completion:]
30  0x7fff36cd2dc1 __86-[FBSWorkspaceScenesClient sceneID:createWithParameters:transitionContext:completion:]_block_invoke.154
31  0x7fff36cb7757 -[FBSWorkspace _calloutQueue_executeCalloutFromSource:withBlock:]
JavaScript stack trace:
file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:382:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:411:0
at forEach([native code])
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:410:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:558:0
at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/properties.js:1048:0)
at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/properties.js:992:0)
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:647:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:278:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:232:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:214:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:42:0
at makeKeyAndVisible([native code])
at file: node_modules/@nativescript/core/application/application.ios.js:252:0
at file: node_modules/@nativescript/core/application/application.ios.js:174:0
at file: node_modules/@nativescript/core/application/application.ios.js:163:0
at [native code]
at file: node_modules/@nativescript/core/application/application.ios.js:36:0
at UIApplicationMain([native code])
at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0)
at file: node_modules/@nativescript/angular/platform-common.js:211:0
at file: node_modules/@nativescript/angular/platform-common.js:112:0
at file: node_modules/@nativescript/angular/platform-common.js:92:0
at file:///app/bundle.js:263:144
at ./main.ts(file:///app/bundle.js:268:34)
at __webpack_req<…>
JavaScript error:
file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:382:0: JS ERROR TypeError: null is not an object (evaluating 'item.content.ios')
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: null is not an object (evaluating 'item.content.ios')
at
file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:382:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:411:0
at forEach([native code])
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:410:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:558:0
at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/properties.js:1048:0)
at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/properties.js:992:0)
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:647:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:278:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:232:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:214:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:75
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:310:0
at file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:317:0
at file: node_modules/@nativescript/core/ui/bottom-navigation/bottom-navigation.ios.js:42:0
at makeKeyAndVisible([native code])
at file: node_modules/@nativescript/core/application/application.ios.js:252:0
at file: node_modules/@nativescript/core/application/application.ios.js:174:0
at file: node_modules/@nativescript/core/application/application.ios.js:163:0
at [native code]
at file: node_modules/@nativescript/core/application/application.ios.js:36:0
at UIApplicationMain([native code])
at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0)
at file: node_modules/@nativescript/angular/platform-common.js:211:0
at <…>
NativeScript caught signal 6.
Native Stack:
1   0x10789b251 sig_handler(int)
2   0x7fff51c005fd _sigtramp
3   0x7fff51af4f39 itoa64
4   0x7fff51af0b7c abort
5   0x7fff4f9f7858 abort_message
6   0x7fff4f9e8cbf demangling_unexpected_handler()
7   0x7fff50ba8c0b _objc_terminate()
8   0x7fff4f9f6c87 std::__terminate(void (*)())
9   0x7fff4f9f6c29 std::terminate()
10  0x7fff519e38df _dispatch_client_callout
11  0x7fff519e6292 _dispatch_block_invoke_direct
12  0x7fff36cf86e9 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__
13  0x7fff36cf83d7 -[FBSSerialQueue _queue_performNextIfPossible]
14  0x7fff36cf88e6 -[FBSSerialQueue _performNextFromRunLoopSource]
15  0x7fff23da0d31 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
16  0x7fff23da0c5c __CFRunLoopDoSource0
17  0x7fff23da0434 __CFRunLoopDoSources0
18  0x7fff23d9b02e __CFRunLoopRun
19  0x7fff23d9a944 CFRunLoopRunSpecific
20  0x7fff38ba6c1a GSEventRunModal
21  0x7fff48c8b9ec UIApplicationMain
22  0x10828ca8d ffi_call_unix64
23  0x10f4ec950
JS Stack:
UIApplicationMain([native code])
at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0)
at file: node_modules/@nativescript/angular/platform-common.js:211:0
at file: node_modules/@nativescript/angular/platform-common.js:112:0
at file: node_modules/@nativescript/angular/platform-common.js:92:0
at file:///app/bundle.js:263:144
at ./main.ts(file:///app/bundle.js:268:34)
at __webpack_require__(file: src/webpack/bootstrap:750:0)
at checkDeferredModules(file: src/webpack/bootstrap:43:0)
at webpackJsonpCallback(file: src/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation
at
at asyncFunctionResume
at
at promiseReactionJob

To Reproduce

• using the nativescript create command with --template tns-template-tab-navigation-ng
• upgrade to angular 9 wit hthe documentation by @NathanWalker

Expected behavior Tabs are working with page routes

Additional context Seems just to be broken for me on ng 9, before the upgrade everything worked fine

Current debugging information:

• In the BottomNavigation function getViewController the item.content is every time null when I use a <page-router-outlet> in combination with a name (named outlet) other wise the content is existing (a frame)

[MitkoTschimev]

maybe this can help you too -> I think the reason why this happens is that the frames are getting removed but I don't know why TabContentItem(16)._removeView(Frame(17))

Left side: angular 8 - working Right side: angular 9 - not working

[MitkoTschimev]

If I disable Ivy everything works

[eloiqs]

I'm having the exact same issue

[StefanAleksik]

Any progress on this? I have the same issue :(

[miladfm]

I'm having the same issue and after 1 day working, i found a solution for the problem. Just wrap page-router-outlet with StackLayout.

...

<TabContentItem>
     <StackLayout>
         <page-router-outlet name="homeTab"></page-router-outlet>
     </StackLayout>
 </TabContentItem>

 ...

at least, it's work fine in my project

[MitkoTschimev]

Ok cool, I will try it! Thx 🙏🏻

[StefanAleksik]

Yes! It works. Tnx. 🙏🏻