[SOLVED] Angular failed to instantiate modules in production build

Angular failed to instantiate modules in production build

I'm trying to add features requiring new third party modules to an Angular app, using gulp and bower. Everything is fine in dev mode but any new modules I add produce the notorious "Failed to instantiate module" error in production. I have tried disabling the uglify build step and it made no difference. Simply declaring the new module as a dependency to one of my own is enough to produce the error.

Unlike in many of these questions I am already using the string array syntax for dependencies and the app is already functioning with various other modules. I see no difference between what I'm adding and the other libraries already in use.

Here is my current attempt at including ngCookies, but I've done the same thing with others eg. ngFileUpload with the same results.

bower.json:

  "dependencies": {
    "jquery": "^2.1.4",
    "angular": "^1.5.9",
    "angular-sanitize": "^1.4.5",
    "extras.angular.plus": "^0.9.2",
    "moment": "^2.10.3",
    "angular-ui-router": "^0.2.15",
    ...
    "angular-cookies": "^1.5.9", // new
  },

index.html:

<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
...
<script src="/bower_components/angular-cookies/angular-cookies.js"></script> // new
<!-- endbower -->
<!-- endbuild -->

core module declaration:

(function () {
  'use strict';

  angular
    .module('app.core', [
      'ngAnimate',
      'ngSanitize',
      'blocks.exception',
      'blocks.logger',
      'blocks.router',
      'ui.router',
      'firebase',
      'ngMap',
      'ngplus',
      'ngCookies', // new
    ]);

})();

minified/uglified js output:

app.js

function(){"use strict";angular.module("app.core",["ngAnimate","ngSanitize","blocks.exception","blocks.logger","blocks.router","ui.router","firebase","ngMap","ngplus","ngCookies"])}(), ...

lib.js

t.module("ngCookies",["ng"]).provider("$cookies", ...

console output:

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module app.core due to:
[$injector:modulerr] Failed to instantiate module ngCookies due to:
[$injector:nomod] Module 'ngCookies' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.9/$injector/nomod?p0=ngCookies

Solution

As I can see you had different version of angular API loaded and bounded together. Ideally you should refer the angular API library with same version. But in your case you had angular-animate which has 1.4.8 version but other angular API has 1.5.8 version. Which may internally conflict.

Rather I'd suggest you to have all angular API version same as 1.5.8. This could solve your problem.