Unexpected value of "DataTablesModule" imported by the "AppModule" module. Add @NgModule Note

Question

I am new to Angular data tables and I am trying to implement Angular Data tables by following the instructions provided at https://l-lin.imtqy.com/angular-datatables/#/getting-started

after following the instructions when trying to start the application using the Angular CLI. I get the error "Uncaught Error: Unexpected value" DataTablesModule "imported by the module" AppModule ". Add a note @NgModule.

Note. I added a DataTablesModule to my app.module.ts as shown below.

import { ActionComponent } from './action/action.component';
import { SearchfilterPipe } from './search/searchfilter.pipe';
import { DataTablesModule } from 'angular-datatables';

@NgModule({
declarations: [
AppComponent,
routingComponents,
LicenseComponent,
HeaderComponent,
ActionComponent,
FooterComponent,
SearchfilterPipe

],
imports: [
BrowserModule,
HttpModule,
FormsModule,
DataTablesModule,
AppRoutingModule,
NgbModule.forRoot()
],
providers: [HttpModule],
bootstrap: [AppComponent]
})
export class AppModule { }

and in .angular-cli.json I added the code below

{
"apps": [
{
  ...
  "styles": [
    "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/datatables.net/js/jquery.dataTables.js"
  ],
  ...
 }
 ]
 }

I am using the versions below.

@angular/cli: 1.1.0
 node: 8.0.0
@angular/: 4.2.3
 @angular/: 4.2.6
 @angular/compiler-cli: 4.2.3

, . / .

Answer 1

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
     ]
    }
  }
}

angular-datatables node_modules @angular , angular, node_modules angular-datatables .

Answer 2

aot

ng serve --aot

-preserve-links

ng serve --preserve-symlinks