Cannot find module DataTablesModule with Angular Datatable in Angular 6

Question

I am not able to include DataTableModule into our Angular 6 project with datatable. I am using angular cli 6 with datatable. My code is showing error that cannot find module DataTablesModule. I have installed all packages related to datatable and jquery. It is also displaying into node_modules folder but not able to add into app.module.ts.

I am attaching the screenshot below:

Here is my code.

Getting this error in browser

have you included the file path in the angular.json?

Exterminator
– Exterminator

2018-10-12 11:08:11 +00:00
Commented Oct 12, 2018 at 11:08 — Exterminator
– Exterminator, Commented Oct 12, 2018 at 11:08
yes I have included

deepak bhardwaj
– deepak bhardwaj

2018-10-12 12:00:52 +00:00
Commented Oct 12, 2018 at 12:00 — deepak bhardwaj
– deepak bhardwaj, Commented Oct 12, 2018 at 12:00

Exterminator · Accepted Answer · 2018-10-12 11:14:05Z

6

Maybe you are missing any dependency. Follow the steps given in this documentation Angular Datatables

1: Install all the dependencies

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

2: Add all the dependencies in angular.json

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "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"
            ],
            ...
}

3: Import in app-module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    DataTablesModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

answered Oct 12, 2018 at 11:14

Exterminator

1,2467 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

deepak bhardwaj Over a year ago

followed all these steps, but still angular datatable is showing error

Max Over a year ago

Thank you very much! This is working perfectly for me and I already used it in plenty projects.

Vineet Mishra · Accepted Answer · 2020-10-10 19:03:05Z

0

I had the same problem. I solved it by running the following command in terminal:

ng add angular-datatables

Ref: https://www.npmjs.com/package/angular-datatables/v/9.0.2

Also, This is my complete code if someone want to take a look.

https://github.com/xbox2204/SpringBoot-JPA-Swagger-Angular

edited Oct 10, 2020 at 19:03

answered Oct 10, 2020 at 13:19

Vineet Mishra

1097 bronze badges

Comments

red1dev · Accepted Answer · 2022-01-01 10:27:57Z

0

I had the same error because i used the angular CLI command: ng add angular-datatables. but when i installed the packages manually, the error was gone. this is the packages :

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

answered Jan 1, 2022 at 10:27

red1dev

826 bronze badges

Collectives™ on Stack Overflow

Cannot find module DataTablesModule with Angular Datatable in Angular 6

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related