Error: Template parse errors: 'super-tab-button' is not a known element in ionic 3

Question

i tried using super tab in angular ionic 3, but i get error, i already declare supertab, but it is not work

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'super-tab-button' is not a known element:
1. If 'super-tab-button' is an Angular component, then verify that it is part of this module.
2. If 'super-tab-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<super-tabs-toolbar slot="top" no-border>
 [ERROR ->]<super-tab-button (click)="switchTab('keyFields')">
      <ion-label>Key Fields</ion-label>
    </sup"): ng:///MyContactsDetailPageModule/MyContactsDetailPage.html@34:4


import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { MyContactsDetailPage } from './my-contacts-detail';

@NgModule({
  declarations: [
    MyContactsDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(MyContactsDetailPage),
    SuperTabsModule
  ],
})
export class MyContactsDetailPageModule {}

and this is how i call in my html

  <super-tabs-toolbar slot="top" no-border>
    <super-tab-button (click)="switchTab('keyFields')">
      <ion-label>Key Fields</ion-label>
    </super-tab-button>
    <super-tab-button (click)="switchTab('details')">
      <ion-label>Details</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>

and this is my contact details.ts

import { SuperTabsModule } from 'ionic2-super-tabs/dist/super-tabs.module';

@IonicPage()
@Component({
  selector: 'page-my-contacts-detail',
  templateUrl: 'my-contacts-detail.html',
})
export class MyContactsDetailPage {
  private pageActive: any ;
  @ViewChild(SuperTabsModule) superTabs: SuperTabsModule;
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.pageActive = 'keyFields';
  }

  private switchTab(page) {
    this.pageActive = page;
  }
}

can you guys help me to solve this problem? thanks

Answer 1

Please compare your code against this example

Your implementation is incorrect.

Modules are imported within other modules.

In your component, you should be importing the actual class/component

Your contact-details.ts should be like so:

import { SuperTabs } from 'ionic2-super-tabs';

@IonicPage()
@Component({
  selector: 'page-my-contacts-detail',
  templateUrl: 'my-contacts-detail.html',
})
export class MyContactsDetailPage {
  private pageActive: any ;
  @ViewChild(SuperTabs) superTabs: SuperTabs;
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.pageActive = 'keyFields';
  }

  private switchTab(page) {
    this.pageActive = page;
  }
}