Can't bind to 'kind' since it isn't a known property of 'ngx-fs-icon'

Question

I am using Akveo/ngx-admin template. I have created some of my own modules and in it and then tried running production build on it but it gave me some errors. So i had to create a shared module and i put all the modules inside the imports of shared module and almost all errors went away but this one.

ERROR in : Can't bind to 'kind' since it isn't a known property of 'ngx-fs-icon'. 1. If 'ngx-fs-icon' is an Angular component and it has 'kind' input, then verify that it is part of this module. 2. If 'ngx-fs-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

The ngx-fs-icon component is made inside tree-grid.component.ts file by default

@Component({
  selector: 'ngx-fs-icon',
  template: `
    <nb-tree-grid-row-toggle [expanded]="expanded" *ngIf="isDir(); else fileIcon">
    </nb-tree-grid-row-toggle>
    <ng-template #fileIcon>
      <nb-icon icon="file-text-outline"></nb-icon>
    </ng-template>
  `,
})
export class FsIconComponent {
  @Input() kind: string;
  @Input() expanded: boolean;

  isDir(): boolean {
    return this.kind === 'dir';
  }

The treegrid component is made inside the tables module and i have added the TablesModule in the imports in SharedModule.

tables.module.ts

import { NgModule } from '@angular/core';
import { NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
import { Ng2SmartTableModule } from 'ng2-smart-table';

import { ThemeModule } from '../../@theme/theme.module';
import { TablesRoutingModule, routedComponents } from './tables-routing.module';
import { FsIconComponent } from './tree-grid/tree-grid.component';

@NgModule({
  imports: [
    NbCardModule,
    NbTreeGridModule,
    NbIconModule,
    NbInputModule,
    ThemeModule,
    TablesRoutingModule,
    Ng2SmartTableModule,
  ],
  declarations: [
    ...routedComponents,
    FsIconComponent,
  ],
})

export class TablesModule { }

shared.module.ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  NbAccordionModule,
  NbButtonModule,
  NbCardModule,
  NbListModule,
  NbRouteTabsetModule,
  NbStepperModule,
  NbTabsetModule, NbUserModule,
  NbRadioModule, NbSelectModule,
  NbDatepickerModule, NbActionsModule,
  NbCheckboxModule, NbAlertModule
} from '@nebular/theme';


import { AlertComponent } from '../extra-components/alert/alert.component';
import { NbIconModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { ThemeModule } from '../../@theme/theme.module';
import { FormsRoutingModule } from '../forms/forms-routing.module';
import { TablesModule } from '../tables/tables.module';

import { FormsComponent } from '../forms/forms.component';
import { FormInputsComponent } from '../forms/form-inputs/form-inputs.component';
import { FormLayoutsComponent } from '../forms/form-layouts/form-layouts.component';
import { ButtonsComponent } from '../forms/buttons/buttons.component';
import { FsIconComponent } from '../tables/tree-grid/tree-grid.component';
import { DatepickerComponent } from '../forms/datepicker/datepicker.component';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
      ReactiveFormsModule,
      ThemeModule,
      NbTabsetModule,
      NbRouteTabsetModule,
      NbStepperModule,
      NbCardModule,
      NbButtonModule,
      NbListModule,
      NbAccordionModule,
      NbUserModule,
      NbTreeGridModule,
      NbIconModule,
      NbInputModule,
      ThemeModule,
      // TablesRoutingModule,
      Ng2SmartTableModule,
      NbRadioModule, 
      NbSelectModule,
      NbDatepickerModule,
      NbActionsModule,
      FormsRoutingModule,
      NbCheckboxModule,
      NbAlertModule,
      TablesModule
  ]
})
export class SharedModule { }

Answer 1

If you dont export the FsIconComponent it wont be available in other modules

//your module
declarations: [
  ...routedComponents,
  FsIconComponent,
],
exports: [FsIconComponent]

Answer 2

I tried add icon component to share.module, but I got error

Unexpected directive 'NbFsComponent' imported by the module 'SharedModule'

Im my case only works add icon component to declarations in this module when tree is used

Answer 3

you forgot to import 'input' in your component file

import { Input } from '@angular/core';