Browserify/Browserify-shim with angular-ui-sortable library

125 Views Asked by At

I am currently updating my existing AngularJS application to incorporate browserify. My app currently uses the angular-ui and angular-ui-sortable modules within my project as seen below:

import "babel-polyfill";
import $ from 'jquery';
import angular from 'angular';

import { RouteConfig, RouteChangeSuccess } from './config/route.config';
import constants from './constants';
import 'angular-route';
import 'angular-sanitize';
import 'angular-animate';
import 'angular-filter';
import 'angular-ui-bootstrap';
import 'angular-ui-sortable';
import 'angular-object-diff';
import 'angular-clipboard';

import './templates';
import './filters';
import './controllers';
import './services';
import './directives';

angular.module('app', [
  'ngRoute',
  'ngSanitize',
  'ngAnimate',
  'angular.filter',
  'ui.bootstrap',
  'ui.sortable',
  'ds.objectDiff',
  'angular-clipboard',
  'app.templates',
  'app.filters',
  'app.controllers',
  'app.services',
  'app.directives'
]);

angular.module('app').constant('AppSettings', constants);
angular.module('app').config(RouteConfig);
angular.module('app').run(RouteChangeSuccess);
angular.bootstrap(document, ['app'], {
  strictDi: true
});

I currently use gulp with browserify to bundle my vendor files and app files separately.

When serving up the application I am met with the error message on the browser console:

Error: 'ui.sortable: jQuery should be included before AngularJS!'

I have done some research and found that using browserify-shim could resolve this. I tried to apply my findings to my package.json and got this far:

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-animate": "./node_modules/angular-animate/angular-animate.js",
    "angular-ui-bootstrap": "./node_modules/angular-ui-bootstrap/index.js",
    "angular-ui-sortable": "./node_modules/angular-ui-bootstrap/dist/sortable.js",
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "browserify-ngannotate",
      "bulkify",
      "deamdify",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "angular": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "angular-animate": {
      "depends": [
        "angular"
      ]
    },
    "angular-ui-sortable": {
      "depends": [
        "jquery:jQuery",
        "angular"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "angular-ui-bootstrap": {
      "depends": [
        "angular",
        "bootstrap"
      ]
    }
  }

Still to no avail, the error remains.

Is there something blatant I am missing in my dependencies?

I know I could use another drag-n-drop library, but I would rather try to figure this out.

Thank you very much for any help provided.

0

There are 0 best solutions below