Error when using TabView in Angular lazy loaded modules


#1

Hi all!

I have a tab view as simple as:

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000">
    <StackLayout *tabItem="{title: 'Stats'}">
        <Label text="Second tab item"></Label>
    </StackLayout>
</TabView>

When I set this tab view into the app.component.html (the root component of my angular application). However, I also have a Lazy Loaded module, when I place this tab view into my component inside my lazy loaded module, I get the following error:

Template parse errors:
Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations

Sounds like I do not have the NativeScriptModule imported in my root module, but I actually have it imported (in the root module and only once as the documentation says) and my lazy loaded module is correctly imported, and a proof that is it works fine if I do not place the tab view into my lazy loaded module.

What may I been doing wrong?

Thanks for your help!


#2

I don’t think lazy loading is yet supported in named router outlets that’s inside TabView.


#3

Yeah, Probably!

But the point is that in my case, I don’t have any router outlet inside the TabView (check the snippet above), but the oposite, I have a router outlet that loads a component that contains a Tab on it.

But, thanks anyways!

@manojdcoder


#4

I do have a module which has TabView and lazily loaded, I can confirm that there was no issue.

Have you imported NativeScriptCommonModule in the other module that is lazily loaded?