Nativescript-angular: [Bug] - Error when setting a font on TabView on iOS

[bsnelder]

Issue:
After upgrading to {N} 2.5 and then setting a custom font (family or size) using CSS on a TabView I get the following error in the console using the iOS simulator:

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): TypeError: null is not an object (evaluating 'tabBar.items.count')

It seems to be working when setting the font-family directly on the TabView (just shows the error in the console). However when I set the custom font on the Page instead of directly on the TabView the whole TabView is blank.

This only applies to iOS. Works fine on the Android emulator.

Example:
Tried this with {N} 2.5 on the default ng template using tns create component-core --ng and then modifying the default items.component.html with the following template.

_items.component.html_

<ActionBar title="TestTitle" style.backgroundColor="#149718"></ActionBar>

<TabView sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'Overview'}" >
        <Label text="Test Label"></Label>
    </StackLayout>
</TabView>

_app.css_

TabView {
    background-color: #F3F3F3;
    font-family: 'Courier'; // Enabling this (without the font-family defined on the Page) results in just the console error
}


Page { 
    font-family: 'Courier'; // Enabling this results in the error and shows a blank TabView 
}

Versions:
Nativescript version: 2.5
Nativescript-angular version: 1.4.0 (also tried the next version: 1.4.1-2017-01-31-1230)

[tsonevn]

Hi @bsnelder,
Thank you for reporting this issue.
I was able to reproduce this behavior on my side and unfortunately, I have to confirm that this is a real issue while setting fontSize and fontFamily to the TabView component in NativeScript Angular 2 project. This behavior has been reproduced only on iOS.

For further info, you could keep track on the issue.

In meantime, you could set up those properties for the inner layouts of the TabView, which will work as expected for iOS. You could also review the attached example:

HTML

<TabView selecetedIndex="0">
    <StackLayout *tabItem="{title: 'Tab1'}">
        <Label text="First tab" textWrap="true"></Label>      
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab2'}">
        <Label text="Second tab" textWrap="true"></Label>     
    </StackLayout>
</TabView>

TypeScript

TabView{
    background-color: green;

}
StackLayout{
    font-family: 'Courier';
    font-size: 25;
}

Hope this helps

[bsnelder]

Ok thanks, will use the workaround for now. Don't think this was clear in the initial description but just for your information, this was working in {N} version 2.4. Might make it a little bit easier to pinpoint the issue :)

[codeback]

I can confirm this issue affects Android too. See #657

[pap5508]

I am also facing the same issue... in iOS

[vchimev]

This issue was moved to NativeScript/NativeScript#3646

[vchimev]

@bsnelder, @codeback, @pap5508,

We just published [email protected] which addresses the issue.

I moved the issue to the respective repo.