Getting error after adding editor features to Datatables

Sujan

Hi Team,

Appreciate your support to resolve below issue.

I have successfully installed DataTable Editor. But getting below error while running the application.

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at editor.bootstrap4.js:42
    at Object.<anonymous> (editor.bootstrap4.js:9)
    at editor.bootstrap4.js:10
    at Object../node_modules/datatables.net-editor-bs4/js/editor.bootstrap4.js (editor.bootstrap4.js:34)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.component.ts (main.js:133)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:16)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)

angular.json:

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
              "node_modules/datatables.net-editor-bs4/css/editor.bootstrap4.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",

              "node_modules/datatables.net-editor/js/dataTables.editor.min.js",
              "node_modules/datatables.net-editor-bs4/js/editor.bootstrap4.min.js"
            ],

Appcomponent.ts

import 'datatables.net';
import 'datatables.net-bs4';

import 'datatables.net-editor';
import 'datatables.net-editor-bs4';
//declare var $;
import * as $ from 'jquery';

Best Regards,

Sujan

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @Sujan ,

DataTables/Editor are dependent upon jQuery so that needs to be imported first. I'm not too familiar with this, but this thread should help too.

Cheers,

Colin

Sujan

Hi Colin,

Thank you for the response.

As i mentioned earlier, i put all the js files in the below format. Jquery will load first.

"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.min.js",
"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"

Best Regards,

Sujan

allan

Hi Sujan,

It does sound a lot like a load order issue. Can you give me a link to your page so I can take a look and see what order the items are being loaded in?

Thanks,
Allan

edboyer

try moving "import * as $ from 'jquery';" to be the first line in your app component.