Angular 10, app not building after upgrade

[sergiorodriguez82]

I'm submitting a...

[X ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ X] Question

Current behavior

I have a Angular 9 project ,when updating to V10 Im getting this error:.

ERROR in node_modules/angular-datatables/src/angular-datatables.module.d.ts:9:23 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

9     static forRoot(): ModuleWithProviders;
                        ~~~~~~~~~~~~~~~~~~~

ERROR in Can't bind to 'dtOptions' since it isn't a known property of 'table'. ("ass="card-body">
        <div class="table-responsive">
          <table id="tasks-table" datatable [ERROR ->][dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
            [ngClass]="{'table-sm': username}" class=")
Can't bind to 'dtTrigger' since it isn't a known property of 'table'. (" <div class="table-responsive">
          <table id="tasks-table" datatable [dtOptions]="dtOptions" [ERROR ->][dtTrigger]="dtTrigger"
            [ngClass]="{'table-sm': username}" class="table table-bordered ta")

Expected behavior

Minimal reproduction of the problem with instructions

follow this link steps wiht angular 10 cli and you will get the issue https://therichpost.com/angular-10-datatable-working-example/

App module.ts

...
imports: [
    CompaniesModule,
    ProjectsModule,
    ObjectivesModule,
    IndexesModule,
    BSCActivitiesModule,
    MeetingsModule,
    DepartmentsModule,
    SharedModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxSpinnerModule,
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    BsDatepickerModule.forRoot(),
    PopoverModule.forRoot(),
    TimepickerModule.forRoot(),
    GoogleChartsModule,
    TypeaheadModule.forRoot(),
    BrowserAnimationsModule,
    DataTablesModule.forRoot()
...

html

....
<table id="measurements-table" #measurementstable datatable [dtOptions]="dtOptions1"
                [dtTrigger]="dtTrigger1" class="table table-bordered table-hover table-sm" cellspacing="0" width="100%">
                <thead>
....

component.ts

....
@ViewChild('measurementstable', { read: DataTableDirective, static: true }) dtElement1: DataTableDirective;
  @ViewChild('followupstable', { read: DataTableDirective, static: true }) dtElement2: DataTableDirective;
  dtTrigger1: Subject<any> = new Subject();
  dtTrigger2: Subject<any> = new Subject();
  dtOptions1: any = {};
  dtOptions2: any = {};

...

-->

Environment

- node version:12.16.1
- angular version: 10.1.0
- angular-cli version: 10.1.0
- jquery version: 3.5.1
- datatables version:1.10.21
- angular-datatables version:9.0.2

[Rene4100]

This could be related to #1463

[Segfaultd]

I'm sorry, but this issue is still relevant. Using 10.x version of both angular & angular-datatables, I have the exact same error as this issue.

[renierdbruyn]

I'm sorry, but this issue is still relevant. Using 10.x version of both angular & angular-datatables, I have the exact same error as this issue.

@Segfaultd check this post on stackoverflow

In short make sure you import the DataTablesModule into app.module.ts and then add it to to the list of imports: @NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]