Angular 2 - Can't bind to 'settings' since it isn't a known property of 'my-datatable'

Issue

I wanted to use guards and advance routing, so I followed the official routing tutorial

I created a module to put everything that concerned my component , inside ( customers.routing.ts, customers.service.ts, customers.component.ts ....)

since it returns that error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'my-datatable'.
1. If 'my-datatable' is an Angular component and it has 'settings' input, then verify that it is part of this module.
2. If 'my-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("v *ngIf="customers">
        <div class="customersDataTableWrapperDiv">
            <my-datatable [ERROR ->][settings]="tableSettings" (onError)="onDataTableError($event)" ></my-datatable>
        </div>
   "): ng:///CustomersModule/CustomersComponent.html@11:26
'my-datatable' is not a known element:
1. If 'my-datatable' is an Angular component, then verify that it is part of this module.
2. If 'my-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <div *ngIf="customers">
        <div class="customersDataTableWrapperDiv">
            [ERROR ->]<my-datatable [settings]="tableSettings" (onError)="onDataTableError($event)" ></my-datatable>
     "): ng:///CustomersModule/CustomersComponent.html@11:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:

customers.component.html:

<my-datatable [settings]="tableSettings"></my-datatable>

datatable.component.ts:

...
@Component({
    selector: 'my-datatable',
    templateUrl: './dataTable.component.html',
    styleUrls: ['./dataTable.component.css'],
})

export class DataTableComponent implements OnInit {
...
    @Input() settings: any;

but app.module.ts already uses that DataTableComponent, I did not remove it

here is my created module (which is now referred in app.module.ts for imports):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';

import { CustomersComponent } from './customers.component';
import { CustomerComponent } from './customer.component';
import { CustomersService } from './customers.service';
import { CustomersRoutingModule } from './customers.routing';

import { DataTableModule } from '../components/dataTable/dataTable.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        CustomersRoutingModule,
        ReactiveFormsModule,
        DataTableModule
    ],
    declarations: [
        CustomersComponent,
        CustomerComponent,
    ],
    providers: [CustomersService,FormBuilder],
})
export class CustomersModule {}

What could I have missed here? thanks

edit: here is my DataTableModule:

import { NgModule } from '@angular/core';
import { DataTableComponent } from './dataTable.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [CommonModule,FormsModule,ReactiveFormsModule],
    declarations: [DataTableComponent],
    exports: [DataTableComponent]
})
export class DataTableModule{
}

Solution

You shoudl add your DatatableComponent to the module:

@NgModule({
    imports: [],
    declarations: [DatatableComponent],
    exports: [DatatableComponent]
})
export class DatatableModule{
}

And in your view, import the module: DatatableModule.

@NgModule({
    imports: [DatatableModule],
    declarations: [],
    exports: []
})
export class MyCurrentViewModule{
}

Update 1:

Try adding CommonModule to your DatatableModule, like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatatableComponent } from './datatable.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [DatatableComponent],
    exports: [DatatableComponent]
})
export class DatatableModule{
}

Answered By - SrAxi