The 'datatables' module is not available! You either mistakenly wrote the name of the module, or forgot to load it

Question

I get a module error message when I try to load 'datatables' as part of my AngularJS application.

angular.module('pricingOptionsTable', ['resources.pricingOptions', 'datatables']) .controller('pricingDataController', ['$scope', 'poResource', 'DTOptionsBuilder', PricingDataController]) .directive('pricingDataTable', ['$http', '$templateCache', '$compile', PricingDataTable]); 

`

The module controller is defined as:

 function PricingDataController($scope, poResource, DTOptionsBuilder) { 

In index.html, I have:

 <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/datatables/media/js/jquery.dataTables.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-datatables/dist/angular-datatables.js"></script> 

I am using AngularJS 1.3.9, jQuery 2.1.3, Angular Datatables 0.4.0 and Datatables 1.10.4.

Has anyone run this problem using angular -datatables 0.4.0?

Answer 1

Just by looking at the definition module in Github , it seems that the datatables module datatables taking a dependency on datatables.directives and datatables.factory (also in the git repository). datatables.directives in turn has other dependencies (e.g. datatables.renderer, datatables.options, etc.

I believe that your best bet is to run the main datatables module, to first load the “leaf” data scripts (for example, scripts that have no dependencies) and then the datatables.renderer (which has only dependencies on the “leaf” scripts ), then the datatables.directives script, then finally download the datatables script.

So it looks something like this:

 `<script src='/some-path/datatables.util.js></script> <script src='/some-path/datatables.factory.js></script> <script src='/some-path/datatables.options.js></script> <script src='/some-path/datatables.renderer.js></script> <script src='/some-path/datatables.directive.js></script> <script src='/some-path/datatables.js></script>`