Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70434

Super Tabs - NullInjectorError: No provider for SuperTabs!

$
0
0

@mnavatru wrote:

Describe the bug
I added the SuperTabsModule.forRoot() to the app.module.ts. and the SuperTabsModule to home.module.ts. I also put all the <super-tabs> on home.page.html. The menu works so far perfect, but when I import the SuperTabs into the home.page.ts and declare it in the constructor, I get the error.

To Reproduce
Steps to reproduce the behavior:

app.module.ts

import { SuperTabsModule } from '@ionic-super-tabs/angular';

imports: [
        ...
        SuperTabsModule.forRoot()
]

home.module.ts

import { SuperTabsModule } from '@ionic-super-tabs/angular';

@NgModule({
    imports: [
        ...
        SuperTabsModule,
   ]

home.page.html

<ion-header [translucent]="true" class="ion-no-border">
    <ion-toolbar>
        ...
    </ion-toolbar>
</ion-header>
<super-tabs>

    <super-tabs-toolbar slot="top" color="secondary">
        <super-tab-button>
            <ion-icon name="person"></ion-icon>
            <ion-label>Person</ion-label>
        </super-tab-button>
        <super-tab-button>
            <ion-icon name="checkbox"></ion-icon>
            <ion-label>Tasks</ion-label>
        </super-tab-button>
        <super-tab-button>
            <ion-icon name="analytics"></ion-icon>
            <ion-label>Follows</ion-label>
        </super-tab-button>
    </super-tabs-toolbar>

    <super-tabs-container>
        <super-tab>
            Person
        </super-tab>
        <super-tab>
            Tasks
        </super-tab>
        <super-tab>
            Follows
        </super-tab>

    </super-tabs-container>
</super-tabs>

Until here everything works fine, the supertab works fine, but when I add this code to home.page.ts the error appears.

home.page.ts

import { SuperTabs } from '@ionic-super-tabs/angular';
...
constructor(
        ...
        private superTabs: SuperTabs
    ) {

The error NullInjectorError: No provider for SuperTabs! appears

Screenshots

Desktop (please complete the following information):

  • OS: macOS Catalina
  • Version 10.15.4

Additional context
This is my package.json

{
    "name": "abc",
    "version": "1.0.0",
    ...
    "scripts": {
        ...
    },
    "private": true,
    "dependencies": {
        "@angular/common": "~8.2.14",
        "@angular/core": "~8.2.14",
        "@angular/forms": "~8.2.14",
        "@angular/platform-browser": "~8.2.14",
        "@angular/platform-browser-dynamic": "~8.2.14",
        "@angular/router": "~8.2.14",
        "@capacitor/android": "^2.1.0",
        "@capacitor/core": "2.0.1",
        "@capacitor/ios": "^2.1.0",
        "@ionic-native/call-number": "^5.26.0",
        "@ionic-native/contacts": "^5.26.0",
        "@ionic-native/core": "^5.26.0",
        "@ionic-native/social-sharing": "^5.26.0",
        "@ionic-native/splash-screen": "^5.26.0",
        "@ionic-native/status-bar": "^5.26.0",
        "@ionic-super-tabs/angular": "^6.4.0",
        "@ionic/angular": "^5.1.1",
        "@ionic/storage": "^2.2.0",
        "call-number": "^1.0.1",
        "cordova-plugin-contacts": "^3.0.1",
        "cordova-plugin-x-socialsharing": "^5.6.7",
        "cordova-sqlite-storage": "^5.0.0",
        "core-js": "^2.5.4",
        "es6-promise-plugin": "^4.2.2",
        "rxjs": "~6.5.1",
        "tslib": "^1.13.0",
        "zone.js": "~0.9.1"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.803.20",
        "@angular/cli": "~8.3.23",
        "@angular/compiler": "~8.2.14",
        "@angular/compiler-cli": "~8.2.14",
        "@angular/language-service": "~8.2.14",
        "@capacitor/cli": "2.0.1",
        "@ionic/angular-toolkit": "^2.1.1",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.4.3"
    },
    "description": "abc"
}

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70434

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>