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"
}
