Module 'datatables' is not available! You either misspelled the module name or forgot to load it

Question

I am getting a module not available error when trying to load 'datatables' as part of my AngularJS app.

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

`

The module's controller is defined as:

function PricingDataController($scope, poResource, DTOptionsBuilder) {

In the 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 in to this issue with angular-datatables 0.4.0?

Answer 1

Just taking a quick peek at the module's definition on Github, it appears that the datatables module takes a dependency on the datatables.directives and datatables.factory defined (also in the git repository). The datatables.directives in turn has other dependencies (e.g. datatables.renderer, datatables.options, etc.

I believe your best bet in getting the main datatables module up and running is to first load the 'leaf' scripts of datatables (i.e. the scripts that have no dependencies), followed by the datatables.renderer (which only has dependencies on the 'leaf' scripts), followed by the datatables.directives script, then finally load the datatables script.

So it would look 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>`