Getting it working with webpack

[marnickmenting]

I am trying to get DataTables working with webpack using angular 2.4.

What versions you are using?

• angular version: 2.4
• jquery version: 3.1.1
• datatables version: 1.10.13
• angular-datatables version: 2.1.0
• angular-MM version: ?

What's the problem?

I can't get my table interactive. I don't know where to put the dependencies.

Can you share your code?

This is what I have so far. I added this to install dependencies in package.json.

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save

In app.module.ts I added at the top:

import { DataTablesModule } from 'angular-datatables';

and at the 'imports' key under @NgModule:

    DataTablesModule,

Then in table.template.html I added the HTML from the "Zero configuration" Getting Started manual.

<table datatable class="row-border hover">
...
</table>

But now I don't know how to make the table a datatable. Should I add an import somewhere? I am not using Angular-CLI so the manual does not help me here.

[marnickmenting]

I got the CSS loaded at least, by adding this to table.component.ts:

@Component({
	templateUrl: './table.template.html',
	styleUrls:['../../../node_modules/datatables.net-dt/css/jquery.dataTables.css'],
	encapsulation: ViewEncapsulation.None
})

But I got this error:

ERROR in ./~/to-string-loader/src/to-string.js!./~/css-loader!./~/datatables.net-dt/css/jquery.dataTables.css
Module build failed: /Users/marnick/dev/starter-angular/node_modules/datatables.net-dt/images/sort_both.png:1
(function (exports, require, module, __filename, __dirname) { �PNG
                                                              ^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:73:16)

Apparently this is related to the loader used in webpack. I solved this by installing

npm install css-to-string-loader --save-dev

And changing the following in webpack.common.js:

{
  test: /\.css$/,
  use: ['to-string-loader', 'css-loader']
},

to

{
  test: /\.css$/,
  use: ['css-to-string-loader', 'css-loader']
},

Now my datatable is styled, but still lacking interactivity.

[marnickmenting]

When trying the AJAX-example I get the error:

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'dtOptions' since it isn't a known property of 'datatable'. ("

edit: I found out that in the dist folder of version 2.1.0 the @input() and selector:'[datatable]' lines are missing in angular-datatables.directive.ts. But they are present in the src folder of this repository. When I replace them, it works!

[l-lin]

Mmmh weird... Looking at the dist file, Input is defined in https://github.com/l-lin/angular-datatables/blob/v2.1.0/dist/angular-datatables.directive.js#L19

Can you show me the file that fixed your issue?

[marnickmenting]

This line is missing in dist: https://github.com/l-lin/angular-datatables/blob/v2.1.0/src/angular-datatables.directive.ts#L20 . And also Line 14.

[l-lin]

It's defined here: https://github.com/l-lin/angular-datatables/blob/v2.1.0/dist/angular-datatables.directive.js#L37
Weird 😕

[marnickmenting]

What I did for now is add the line

import { DataTablesModule } from '../../../node_modules/angular-datatables/dist/angular-datatables';

to my custom Module. This works, so I guess Angular is importing the .js files instead of the .ts files. Previously I was directly importing the .ts files from /dist/ and that's where I got the errors.

[Newan]

same here, with ng2-admin.

Can't bind to 'dtOptions' since it isn't a known property of 'datatable'. ("

[marnickmenting]

With version 2.3.0 the above problem has gone away. So now I can just add

import { DataTablesModule } from 'angular-datatables';

I followed the steps from the docs, but now I get the following error:

ERROR TypeError: $(...).DataTable is not a function

Searching for it on the internet tells me it might be about loading jQuery twice, but I can't find where I would be doing this in webpack. I'm not experienced with that. Anyone has a clue?

[Pokerkoffer]

I am using angular-datatables together with ng2-datepicker. datatables requires jQuery to be added in the script tag section and datepicker requires jQuery to be added to the systemjs map. jQuery is loaded twice and thats why the error $(...).DataTable is not a function occurs. Skipping one jQuery inclusion results in an error, both ways. Does anyone have an idea how to fix this?

[marnickmenting]

No, I did not get this working. I keep getting the ERROR TypeError: $(...).DataTable is not a function message. My workaround is now to use version 2.1.0.

[burakkilic]

I'm getting the same error.

[joemoceri]

Same

[rahultokase]

Any solution to above ERROR TypeError: $(...).DataTable is not a function even i am getting the same error

[DoanVanThuong]

I'm getting the same error.

[cesar-dick]

I was getting the same error. After a long winter, I find out that I was missing the import of the scripts in the angular-cli.json file:

"styles": [
"../node_modules/datatables.net-dt/css/jquery.dataTables.css",
"styles.scss"
],
"scripts": [
"../node_modules/datatables.net/js/jquery.dataTables.js",
],

[deneshgautam]

m getting an error
Uncaught ReferenceError: angular is not defined
at Object../node_modules/angular-datatables/dist/angular-datatables.js (angular-datatables.js:1352)
at webpack_require (bootstrap:81)
at Object../node_modules/angular-datatables/index.js (index.js:1)
at webpack_require (bootstrap:81)
at Object../src/app/app.module.ts (app.component.ts:10)
at webpack_require (bootstrap:81)
at Object../src/main.ts (environment.ts:8)
at webpack_require (bootstrap:81)
at Object.0 (storage.swaps.ts:57)
at webpack_require (bootstrap:81)

[pup548]

getting same problem as deneshgautam...any solutions?

[jiwlee0625]

Look at this: #1295

Summary: just run npm install [email protected]

[renangi]

thanks jiwlee0625

[Benjith]

app.module.ts:64 Uncaught ReferenceError: DataTablesModule is not defined

[TomYule]

I'm getting the same error.

[ser789654]

getting error:

ERROR ReferenceError: $ is not defined
at angular-datatables.directive.js:42

[gladkiy]

Try to install these packages:

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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed due to inactivity. Please feel free to re-open the issue to add new inputs.