Unknown provider: DTOptionsBuilderProvider <- DTOptionsBuilder <- dataRefreshController

It’s my first time using angular-datatables and DataTables. I’m following the “With a function that returns a promise”-example. However I get the error: [$injector:unpr] Unknown provider: DTOptionsBuilderProvider <- DTOptionsBuilder <- dataRefreshController

What am I doing wrong? In my code I have an app.js, controller.js and service.js file.

The app.js file contains the following:

(function () {
    'use strict';

    angular.module('myApp', ['ngRoute', 'datatables', 'datatables.bootstrap'])
        .config(configFunction);

    configFunction.$inject = ['$routeProvider', '$locationProvider'];
    function configFunction($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/', {
                templateUrl: '/Home/HomePage'
            })
            .when('/Home/About', {
                templateUrl: '/Home/About'
            })
            .when('/Home/Contact', {
                templateUrl: '/Home/Contact'
            })
            .when('/DataRefresh/Schedule', {
                templateUrl: '/DataRefresh/Schedule'
            })
        ;
    }
})();

The controller.js file contains the following:

(function () {
    'use strict';

    angular.module('myApp').controller('dataRefreshController', dataRefreshController);

    dataRefreshController.$inject = ["DTOptionsBuilder", "DTColumnBuilder", "dataRefreshService"];
    function dataRefreshController(DTOptionsBuilder, DTColumnBuilder, dataRefreshService) {
        var drc = this;

        drc.dtOptions = DTOptionsBuilder.fromFnPromise(function () {
            return dataRefreshService.getDataRefreshSchedule();
        }).withPaginationType('full_numbers').withBootstrap();

        drc.dtColumns = [
            DTColumnBuilder.newColumn('column_1').withTitle('Column 1'),
            DTColumnBuilder.newColumn('column_2').withTitle('Column 2'),
            DTColumnBuilder.newColumn('column_3').withTitle('Column 3'),
        ];
    }
})();

The service.js file contains the following:

(function () {
    'use strict';

    angular.module('myApp').service('dataRefreshService', dataRefreshService);

    dataRefreshService.$inject = ["$http", "$cacheFactory"];
    function dataRefreshService($http, $cacheFactory) {
        this.getDataRefreshSchedule = function () {
            return $http({
                method: 'get',
                url: '/api/schedule'
            });
        };
    }
})();

The order the JavaScript files are added to my page is:

<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-datatables.js"></script>
<script src="/Scripts/angular-datatables.plugins/angular-datatables.bootstrap.js"></script>
<script src="/Scripts/ng-app/app.js"></script>
<script src="/Scripts/ng-app/controller.js"></script>
<script src="/Scripts/ng-app/service.js"></script>

[BraveThrasher]

The project uses angularJS 1.5

In the meantime I also tried to setup a plnkr but I could not get it reproduced 😦 Because of this and as a test, I replaced the 7 .js files from the src back with the angular-datatables.js file from the dist folder and… lo and behold… it worked. Not sure why because as far as I can tell nothing changed.

[ppumkin]

Well I removed all the separate files and just used the single angular-datatables.js I found … somewhere. Cause I was not going to install npm and node.js just to build this plugin. I think I used the compiled file used on the demo page