Using Angular component in both AngularJS and Angular code

Question

I'm trying to use component TableComponent in AppInventoryModule

// app-inventory.component.html
...
<div class="table-container">
    <mat-table [model]="tableModel"
        (sortChange)="onSortChange($event)"
        [dataSource]="data">
    </mat-table>
</div>
...

TableComponent is an Angular component:

// src/ts/app/shared/components/table/table.component.ts

...
@Component({
    selector: 'mat-table',
    template: require('./table.component.html')
})

export class TableComponent<T> implements OnInit {
   ...
    ngOnInit() {
        console.log("hello!");
    }
   ... 

I registered it in the AppModule

// src/ts/modules/appModule/app.module.ts

@NgModule({
    ...
    declarations: [
        TableComponent,
        ...
    ],
    entryComponents: [
        TableComponent,
        ...
    ],
...
export class AppModule {
...

And added it into downgrade Module:

// src/ts/modules/appModule/app.module.downgrade.ts

const APP_MODULE_DOWNGRADABLES: Mapper[] = [
    ...
    {
        downgradeAs: 'directive',
        entity: {
            component: TableComponent
        },
        targetName: 'table'
    },
    ...
];

Downgrade.downgradeEntities('AppUI', APP_MODULE_DOWNGRADABLES);

Now I'm using this Table component into AngularJS code:

          // src/template/trails/expanded-table.html

           <div class="table-container">
                <mi-mat-table [model]="tableModel"
                    (sortChange)="onSortChange($event)"
                    [dataSource]="data">
                </mi-mat-table>
            </div>

But I got an error:

Error: Template parse errors:
Can't bind to 'model' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'model' input, then verify that it is part of this module.
2. If 'mat-table' 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. (">
            <div class="table-container">
                <mat-table [ERROR ->][model]="tableModel"
                    (sortChange)="onSortChange($event)"
                    [data"): 
ng:///AppInventoryModule/AppInventoryComponent.html@170:30 
...

But I have already included the Table component into AppModule, don't know why it is not visible.

Answer 1

I've found the solution - I needed to remove TableComponent from the declarations in AppModule and leave it in the entryComponents:

// src/ts/modules/appModule/app.module.ts

...
    declarations: [
        // TableComponent, 
        ...
    ],
    entryComponents: [
       TableComponent,
       ...
    ],
...

As well to update 'targetName: matTable':

// src/ts/modules/appModule/app.module.downgrade.ts

...

    {
        downgradeAs: 'directive',
        entity: {
            component: TableComponent
        },
        targetName: 'matTable'
    },
...