CODEWITHSUNDEEP
angulartypescriptnativescript-angular
Antony M
Antony M

Reputation: 49

Property binding tabItem not used by any directive on an embedded template

I used the tns-template-drawer-navigation-ng to scaffold my app, then added a tab-view for one of the routes. I'm getting the following error message when I click on the drawer link to the tab view:

ERROR Error: Uncaught (in promise): 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"."TabView androidTabsPosition="bottom"

My code is as below:

app-AppRoutingModule.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript- 
angular/router";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  { path: "home", loadChildren: "./home/home.module#HomeModule" },
  { path: "tabby", loadChildren: "./tabby/tabby.module#TabbyModule" }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

tabby.module.ts

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from 
"@angular/core";
import { TabbyRoutingModule, COMPONENTS } from "./tabby- 
routing.module";
import { TabbyComponent } from "./tabby.component";
import { CoreModule } from "./core.module";

@NgModule({
  bootstrap: [
    TabbyComponent
  ],
  imports: [
    TabbyRoutingModule,
    CoreModule
  ],
  declarations: [
    TabbyComponent,
    ...COMPONENTS
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class TabbyModule { }

tabby-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript- 
angular/router";

import { OneComponent } from "./One/one.component";
import { TwoComponent } from "./Two/two.component";

export const COMPONENTS = [ OneComponent, TwoComponent ];

const routes: Routes = [
  { path: "", redirectTo: "/(oneTab:one//twoTab:two)", pathMatch: "full" },

  { path: "one", component: OneComponent, outlet: "oneTab" },
  { path: "two", component: TwoComponent, outlet: "twoTab" }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class TabbyRoutingModule { }

tabby.component.html

<TabView androidTabsPosition="bottom">

  <StackLayout
    *tabItem="{title: 'One', iconSource: getIconSource('home')}"
    name="homeTab">
 </StackLayout>

<StackLayout
    *tabItem="{title: 'Two', iconSource: getIconSource('home')}"
    name="twoTab">
</StackLayout>

</TabView>

package versions

"@angular/core": "~6.0.6",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-sidedrawer": "~4.1.0",

"name": "tns-template-drawer-navigation-ng",
"version": "4.1.2"

Upvotes: 4

Views: 7443

Answers (1)

joshcomley
joshcomley

Reputation: 28818

In tabby.module.ts make sure you import NativeScriptCommonModule:

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from 
"@angular/core";
import { TabbyRoutingModule, COMPONENTS } from "./tabby- 
routing.module";
import { TabbyComponent } from "./tabby.component";
import { CoreModule } from "./core.module";
import { NativeScriptCommonModule } from "nativescript-angular/common";

@NgModule({
  bootstrap: [
    TabbyComponent
  ],
  imports: [
    NativeScriptCommonModule,
    TabbyRoutingModule,
    CoreModule
  ],
  declarations: [
    TabbyComponent,
    ...COMPONENTS
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class TabbyModule { }

Upvotes: 3

Related Questions