ngx-bootstrap / tabs 3.1.1 выдает StaticInjectorError (AppModule) [TabHeadingDirective -> TabDirective] во внутреннем модуле

Question

Я пытаюсь использовать компонент ngx-bootstrap / tabs во внутреннем модуле внутри углового проекта 6, но у меня появляется эта ошибка в консоли, и происходит сбой рендеринга:

   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!
...

Если я импортирую этот компонент в app.module.ts, все работает нормально, когда я пытаюсь использовать его в подмодуле (называемом общим), я получаю ошибку вверху.файл конфигурации для модуля (shared.module.ts) выглядит следующим образом:

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

Понятия не имею, как его решить, может кто-нибудь мне помочь?

Answer 1

Вы должны убедиться, что нет никаких переменных или свойств, названных как в TabModule.

Мой случай был:

У меня есть пользовательский компонент с параметром свойства @Input() tab: string = '0';, чтобы выбратьвкладка во вкладке.

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) ...

это мой пользовательский компонент:

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

Затем я изменил имя tab для tabID

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

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

Я также изменяю де TabModule из ngx-bootstrap на NgbModule из ng-bootstrap

Это решает для меня.В чем твоя проблема?

Answer 2

Вам необходимо добавить в конце модуля импорта .forRoot () примерно так: TabsModule.forRoot()

ОБНОВЛЕНИЕ

Вам необходимо импортировать SharedModule в вашкорневой модуль также, например AppModule