Uncaught TypeError: Cannot read property 'version' of undefined at buttons.flash.js when run datatable angular directive

2
votes

I install the data table angular directive from the https://l-lin.github.io/angular-datatables/#/getting-started

install the data table button extension from https://l-lin.github.io/angular-datatables/#/extensions/buttons

angular.json

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]
          },

package.json

 "dependencies": {
    "@angular/animations": "6.0.7",
    "@angular/common": "6.0.7",
    "@angular/compiler": "6.0.7",
    "@angular/core": "6.0.7",
    "@angular/forms": "6.0.7",
    "@angular/http": "6.0.7",
    "@angular/platform-browser": "6.0.7",
    "@angular/platform-browser-dynamic": "6.0.7",
    "@angular/platform-server": "6.0.7",
    "@angular/router": "6.0.7",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-datatables": "^6.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.19",
    "datatables.net-buttons": "^1.5.3",
    "datatables.net-buttons-dt": "^1.5.3",
    "datatables.net-dt": "^1.10.19",
    "jquery": "^3.3.1",
    "jszip": "^3.1.5",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },

when I run this project then return the error like this :enter image description here

Uncaught TypeError: Cannot read property 'version' of undefined at buttons.flash.js

1
buttondatatabledatatablesangular6angular-datatables

1 Answers

7
votes

Figured it out. The order of the buttons should be like this

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js // should be loaded first before other plugins
https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js  // can be loaded up
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js