CODEWITHSUNDEEP
angularngx-bootstrap
Luigi Antonio Mattinò
Luigi Antonio Mattinò

Reputation: 39

ngx-bootstrap/tabs 3.1.1 give StaticInjectorError(AppModule)[TabHeadingDirective -> TabDirective] in inner module

i'm trying to use the ngx-bootstrap / tabs component in a inner module inside an angular 6 project, but i've got this error in console, and the rendering crash:

   ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TabHeadingDirective -> TabDirective]: 
  StaticInjectorError(Platform: core)[TabHeadingDirective -> TabDirective]: 
    NullInjectorError: No provider for TabDirective!
Error: StaticInjectorError(AppModule)[TabHeadingDirective -> TabDirective]: 
  StaticInjectorError(Platform: core)[TabHeadingDirective -> TabDirective]: 
    NullInjectorError: No provider for TabDirective!
...

If i import this component in the app.module.ts everything works fine, when i try to use it in a sub-module ( called shared ) i get the error at the top. the config file for the module (shared.module.ts) looks like below:

...
import { TabsModule } from 'ngx-bootstrap/tabs';
@NgModule({
  imports: [
...
TabsModule,
...
],
})
export class SharedModule { }

I have no idea how to solve it, can someone help me?

Upvotes: 1

Views: 2955

Answers (2)

vicman
vicman

Reputation: 21

You must verify that there are no variables or properties named like in the TabModule.

My case was:

I have a custom compoentent with a property @Input() tab: string = '0'; parameter to select a tab in the tabset.

ERROR Error: StaticInjectorError(AppModule)[TabDirective -> TabsetComponent]: 
  StaticInjectorError(Platform: core)[TabDirective -> TabsetComponent]: 
    NullInjectorError: No provider for TabsetComponent!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:691) ...

this is my custom component:

<my-component [datos]="datos" [tab]="tab"></my-component>

Then I changed the name tab for tabID

<my-component [datos]="datos" [tabId]="tabId"></my-component>

And @Input() tabId: string = '0';

I also change de TabModule of ngx-bootstrap for NgbModule of ng-bootstrap

That solve for me. What's your issue?

Upvotes: 2

Lucho
Lucho

Reputation: 1547

You need to add in the end of the import module .forRoot() like so : TabsModule.forRoot()

UPDATE

You need to import SharedModule to your root module aswell, e.g. AppModule

Upvotes: 1

Related Questions