Q:

Module error when injecting gridster

Angular 1.5.11
I create a dashboard app. As an example I took this demo. 
When I inject gridster (angular-gridster) as module dependency I receive the following error.
Failed to instantiate module dashboardApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.11/$injector/modulerr?p0=...)
    at file:///Users/sergibondarenko/dev/angular-dashboard/node_modules/angular/angular.min.js:6:426

How to inject gridster?
My app structure:
d- app
 - app.js
 d- templates
  - widget_settings.html
d- style
 - style.css
- index.html

Lib versions:
"angular": "^1.5.11",
"angular-gridster": "^0.13.14",
"angular-ui-bootstrap": "^0.12.1",
"@uirouter/angularjs": "^1.0.3",
"bootstrap": "^3.3.7",
"javascript-detect-element-resize": "^0.5.3"

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Angular Dashboard App</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="node_modules/angular-gridster/dist/angular-gridster.min.css" />
  <link rel="stylesheet" href="style/style.css" />
  <link rel="stylesheet" href="style/style-common.css" />
</head>

 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
 <script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
 <script src="node_modules/javascript-detect-element-resize/detect-element-resize.js"><script>
 <script src="node_modules/angular-gridster/dist/angular-gridster.min.js"></script>

  <body>
    <div ng-app="dashboardApp" ng-controller="DashboardCtrl">
      <div class="container" ui-view>
        <div class="page-header">
            <a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a>
            <a class="pull-right btn btn-warning" ng-click="clear()"><i class="glyphicon glyphicon-trash"></i> Clear</a>
            <h1 style="display: inline-block; width: 200px;">Dashboard</h1>
            <select class="form-control" style="width: 150px; margin-bottom: 20px; display:inline-block;" ng-change="changeDashboard()" ng-model="selectedDashboardId" ng-options="d.id as d.name for d in dashboards | object2Array | orderBy:'id'">
            </select>
        </div>

        <div gridster="gridsterOptions">
            <ul>
                <li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
                    <div class="box" ng-controller="CustomWidgetCtrl">
                        <div class="box-header">
                            <h3>{{ widget.name }}</h3>
                            <div class="box-header-btns pull-right">
                                <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
                                <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
                            </div>
                        </div>
                        <div class="box-content">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
      </div>

    </div>

    <script src="app/app.js"></script>

  </body>
</html>

app/app.js
var app = angular.module('dashboardApp', [
    'ui.router',
    'ui.bootstrap',
    'gridster'
]);

app.config(function ($urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
});

app.controller('DashboardCtrl', ['$scope', '$timeout',
    function($scope, $timeout) {

        $scope.gridsterOptions = {
            margins: [20, 20],
            columns: 4,
            draggable: {
                handle: 'h3'
            }
        };

        $scope.dashboards = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 0,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Widget 1"
                }, {
                    col: 2,
                    row: 1,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Widget 2"
                }]
            },
            '2': {
                id: '2',
                name: 'Other',
                widgets: [{
                    col: 1,
                    row: 1,
                    sizeY: 1,
                    sizeX: 2,
                    name: "Other Widget 1"
                }, {
                    col: 1,
                    row: 3,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Other Widget 2"
                }]
            }
        };

        $scope.clear = function() {
            $scope.dashboard.widgets = [];
        };

        $scope.addWidget = function() {
            $scope.dashboard.widgets.push({
                name: "New Widget",
                sizeX: 1,
                sizeY: 1
            });
        };

        $scope.$watch('selectedDashboardId', function(newVal, oldVal) {
            if (newVal !== oldVal) {
                $scope.dashboard = $scope.dashboards[newVal];
            } else {
                $scope.dashboard = $scope.dashboards[1];
            }
        });

        // init dashboard
        $scope.selectedDashboardId = '1';

    }
]);

app.controller('CustomWidgetCtrl', ['$scope', '$modal',
    function($scope, $modal) {

        $scope.remove = function(widget) {
            $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
        };

        $scope.openSettings = function(widget) {
            $modal.open({
                scope: $scope,
                templateUrl: 'templates/widget_settings.html',
                controller: 'WidgetSettingsCtrl',
                resolve: {
                    widget: function() {
                        return widget;
                    }
                }
            });
        };

    }
]);

app.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget',
    function($scope, $timeout, $rootScope, $modalInstance, widget) {
        $scope.widget = widget;

        $scope.form = {
            name: widget.name,
            sizeX: widget.sizeX,
            sizeY: widget.sizeY,
            col: widget.col,
            row: widget.row
        };

        $scope.sizeOptions = [{
            id: '1',
            name: '1'
        }, {
            id: '2',
            name: '2'
        }, {
            id: '3',
            name: '3'
        }, {
            id: '4',
            name: '4'
        }];

        $scope.dismiss = function() {
            $modalInstance.dismiss();
        };

        $scope.remove = function() {
            $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
            $modalInstance.close();
        };

        $scope.submit = function() {
            angular.extend(widget, $scope.form);

            $modalInstance.close(widget);
        };

    }
]);

// helper code
app.filter('object2Array', function() {
    return function(input) {
        var out = [];
        for (i in input) {
            out.push(input[i]);
        }
        return out;
    }
});

A:

I resolved the problem by upgrading the app to use ES6 modules with help of Webpack 3. And gridster is injected successfully. 
You can find more details in my git repository https://github.com/sergibondarenko/angular-dashboard 
App folder structure:
angular-dashboard
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── app
│   │   ├── app.js
│   │   ├── controllers
│   │   │   ├── customWidgetController.js
│   │   │   ├── dashboardController.js
│   │   │   └── widgetSettingsController.js
│   │   ├── filters
│   │   │   └── object2Array.js
│   │   └── templates
│   │       └── widget_settings.html
│   ├── index.html
│   └── style
│       ├── style-common.css
│       └── style.css
└── webpack.config.js

app.js
import 'angular';
import 'angular-ui-router';
import 'angular-gridster';
import 'angular-ui-bootstrap';
import 'javascript-detect-element-resize';

import '../style/style.css';
import '../style/style-common.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'angular-gridster/dist/angular-gridster.min.css';

import { DashboardCtrl } from './controllers/dashboardController';
import { CustomWidgetCtrl } from './controllers/customWidgetController';
import { WidgetSettingsCtrl } from './controllers/widgetSettingsController';

import { Object2Array } from './filters/object2Array.js';

const app = angular.module('dashboardApp', [
    'ui.router',
    'ui.bootstrap',
    'gridster'
])
.controller('DashboardCtrl', DashboardCtrl)
.controller('CustomWidgetCtrl', CustomWidgetCtrl)
.controller('WidgetSettingsCtrl', WidgetSettingsCtrl)
.filter('object2Array', Object2Array);

app.config(function ($urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
});

