TypeError: $(…).DataTable is not a function in Angular4

Question

I used bootstrap4 datatable jquery function in my angular4 app to create a sortable table. Here is the code.

.component.ts

import { Component } from '@angular/core'; declare var $: any;

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']

}) export class DashboardComponent {
    constructor() {
        $('#sortableTable').DataTable();
    }
}

index.html

<head>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
  <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

</head>

.angular-cli.json

"styles": [
            "styles.css",
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "../node_modules/alertifyjs/build/css/alertify.min.css",
            "../node_modules/alertifyjs/build/css/themes/bootstrap.min.css",
            "../src/assets/css/style.css",
            "../src/assets/css/colors/default-dark.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/popper.js/dist/umd/popper.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js",
            "../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
            "../node_modules/metismenu/dist/metisMenu.min.js",
            "../node_modules/pace-js/pace.min.js",
            "../node_modules/alertifyjs/build/alertify.min.js"
        ],

I am getting this error when I run my application.

ERROR TypeError: $(...).DataTable is not a function at new DashboardComponent (dashboard.component.ts:17) at createClass (core.es5.js:10910) at createDirectiveInstance (core.es5.js:10751) at createViewNodes (core.es5.js:12192) at createRootView (core.es5.js:12082) at callWithDebugContext (core.es5.js:13467) at Object.debugCreateRootView [as createRootView] (core.es5.js:12771) at ComponentFactory_.create (core.es5.js:9861) at ComponentFactoryBoundToModule.create (core.es5.js:3333) at ViewContainerRef_.createComponent (core.es5.js:10059)

I hope to hearing from anyone with a great solution. Thanks.

It looks like you are loading jQuery twice; once in index.html and once in .angular-cli.json. Remove one of them, probably the one in index.html. — K Thorngren
When I delete the jquery library from index.html, I receive this error. Uncaught ReferenceError: jQuery is not defined And I get the error still when I delete the jquery library from angular-cli.json — D. Sean
which error do you get if you delete is from angular-cli.json? And make sure you restart ng serve after — David
I get this error. ERROR TypeError: $(...).DataTable is not a function at new DashboardComponent (dashboard.component.ts:17) at createClass (core.es5.js:10910) at createDirectiveInstance (core.es5.js:10751) at createViewNodes (core.es5.js:12192) at createRootView (core.es5.js:12082) at callWithDebugContext (core.es5.js:13467) at Object.debugCreateRootView [as createRootView] (core.es5.js:12771) at ComponentFactory_.create (core.es5.js:9861) at ComponentFactoryBoundToModule.create (core.es5.js:3333) at ViewContainerRef_.createComponent (core.es5.js:10059) — D. Sean

Rajesh C nair Rajesh C nair · Accepted Answer · 2018-02-09T17:34:45

Use @ViewChild to call the function. e.g.

@ViewChild('sortableTable') sortableTable: any;
sortableTable.DataTable()

TypeError: $(…).DataTable is not a function in Angular4

1 Answers