Unexpected value 'DataTablesModule' imported by the module 'AppModule'. Please add a @NgModule annotation

Question

I am new to Angular Data tables and I am trying to implement Angular Data tables by following the instructions given in the link https://l-lin.github.io/angular-datatables/#/getting-started

after following the instructions when I try to run the application using Angular CLI I am getting Uncaught Error: Unexpected value 'DataTablesModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Note: I have added DataTablesModule in 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 have added the below code

{
"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 below provided versions.

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

Not understanding why exactly my application is crashing.Any Inputs/Suggestions will be highly appreciated.

angular-datatables includes node_modules folder. That's why you're getting this error. I would say it's a bug — yurzui
Try removing node_modules/angular/datatables/node_modules folder — yurzui

Nour Nour · Accepted Answer · 2017-09-11T11:14:18

First modify your tsconfig.json and add this block inside

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

Next, angular-datatables actually installs a version of node_modules and includes a copy of @angular inside of it and this causes a conflict between angular versions so just remove the node_modules from angular-datatables folder and you're good to go.

Unexpected value 'DataTablesModule' imported by the module 'AppModule'. Please add a @NgModule annotation

2 Answers