Angular minification with grunt results in 'Failed to instantiate module' error

Question

I am aware of setting up a controller, service, model etc for prepping for minification. I have about 20 controllers, models and services as individual files and I want to minify and concat them all into one JS file for production.

To get an idea of how I have these files setup, here is an example:

VforumJS.controller('MainController', ['$scope', '$location', '$sce', 'MainModel', 'LogModel', 'MainDebug', 'timecode', 'Idle', function($scope, $location, $sce, MainModel, LogModel, MainDebug, timecode, Idle)
{
  ...
}]);

After minification, I get the error

Failed to instantiate module VforumJS due to:
  Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=a

If I click the error link, it says Unknown provider: a

Here is where my module gets created

var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)
{
  localStorageServiceProvider.setPrefix('vforumdesktop');
  $locationProvider.html5Mode(true);

  $routeProvider
  .when('/', {
    ...
  })
  .otherwise({
    ...
  });
};

var VforumJS = angular.module('VforumJS', ['ngRoute','LocalStorageModule', 'ngTouch', 'ui-rangeSlider','base64','ngIdle'])
.config(['$routeProvider', '$locationProvider', 'localStorageServiceProvider', VforumJsConfig])
.constant('LogTypes', {
  LOGIN:          1,
  IDLE_LOGOUT:    2,
  MANUAL_LOGOUT:  3,
  VFORUM_OPEN:    4,
  VFORUM_CLOSE:   5
})
.constant('SendLogs', false)
.constant('MainDebug', true);

Am I maybe not doing the proper minification prep in the above code where the module is created?

Here is my Gruntfile.js

'use strict';

module.exports = function(grunt)
{
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      all_src: {
        options: {
          sourceMap: true,
          sourceMapName: 'source.map'
        },
        src: 'resources/js/**/*.js',
        dest: 'composite.all.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

Doesn't .config(VforumJsConfig) need to be using the minification contructor form? .config(['$routeProvider', '$locationProvider', 'localStorageServiceProvider', VforumJsConfig]) — shieldstroy
– shieldstroy, Commented Jul 8, 2015 at 17:17
Take a look at ngAnnotate github.com/olov/ng-annotate it might help you. — yvesmancera
– yvesmancera, Commented Jul 8, 2015 at 17:18
@shieldstroy I just tried that and still the same error. @yvesmancera, I tried using ng-annotate yesterday but could not get the dang thing to run. I think maybe I was using the wrong syntax, but I couldn't figure out how to run ng-annotate OPTIONS 'my/file/name.js' — Ronnie
– Ronnie, Commented Jul 8, 2015 at 17:22
Based on the code you've given us, the .config() call has to be the culprit, as @shieldstroy has brought up. If that's not working, post the portion of your minified file that instantiates the module. — Agop
– Agop, Commented Jul 8, 2015 at 17:40
Not sure what config() you saw, but I edited it to injected the providers I am using — Ronnie
– Ronnie, Commented Jul 8, 2015 at 17:46

shieldstroy · Accepted Answer · 2015-07-08 18:05:51Z

2

Your .config is definitely one of the issues. Double check and make sure that everywhere in your code that you are injecting a service/provider that you are using the in-line minification.

This is what a config injecting one provider (just $logProvider for this example) will look like after minification:

.config(function(a){
  console.log("Never gets here, but a is", a);
})

When really it should look like this:

.config(['$logProvider', function(a){
  console.log("a is", a);
}])

Here is a codepen: http://codepen.io/troylelandshields/pen/xGjKGV

edited Jul 8, 2015 at 18:05

answered Jul 8, 2015 at 17:30

shieldstroy

1,3271 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Ronnie Over a year ago

so is my updated config line still not correct? Is $logProvider something I need to include? Could minifying already minified files cause issues? I forgot I have some plugins that are already minified, however, my grunt is minifying them anyway

Ronnie Over a year ago

I double checked all my files and I am certainly using inline minification

shieldstroy Over a year ago

Sorry if that wasn't clear, I was using $logProvider as a general example. If you made it look like that with the providers that you are using then that is fine.

shieldstroy Over a year ago

Is it possible that you missed adding the string into the array for just a single parameter in one of your controllers or services?

Ronnie Over a year ago

gotcha, ok. I thought so and had removed it and just did that for the providers I was using. This is what my file looks like now. It's the full file, so can you see anything wrong here: pastie.org/10280430?

|

chrisvans · Accepted Answer · 2015-07-08 18:02:07Z

0

Your VforumJsConfig line is the issue

var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)

The function parameters get minified, and angular doesn't know where to inject them from. You need to supply them as strings ( just like your other functions ), as strings won't be altered during minification.

From the docs: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification

So you will need to add after the definition of VforumJsConfig:

VforumJsConfig.$inject = ['$routeProvider', '$locationProvider', 'localStorageServiceProvider']

answered Jul 8, 2015 at 18:02

chrisvans

2482 silver badges8 bronze badges

3 Comments

shieldstroy Over a year ago

Won't they way he's doing it now work? (See his edited post)

Ronnie Over a year ago

I believe I am doing this already: .config(['$routeProvider', '$locationProvider', 'localStorageServiceProvider', VforumJsConfig])

chrisvans Over a year ago

You're right, I was looking at it wrong. From the code you've provided, it does look correct.

Phil · Accepted Answer · 2018-09-17 14:52:28Z

Use the array syntax for VforumJsConfig so that the dependencies are defined explicitly rather than implied by the parameter names which will be minified. Instead of:

var VforumJsConfig = function($routeProvider, $locationProvider, 

localStorageServiceProvider)
{
  localStorageServiceProvider.setPrefix('vforumdesktop');
  $locationProvider.html5Mode(true);

  $routeProvider
  .when('/', {
    ...
  })
  .otherwise({
    ...
  });
};

Try:

var VforumJsConfig = ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider, localStorageServiceProvider)
{
  localStorageServiceProvider.setPrefix('vforumdesktop');
  $locationProvider.html5Mode(true);

  $routeProvider
  .when('/', {
    ...
  })
  .otherwise({
    ...
  });
}];

Collectives™ on Stack Overflow

Angular minification with grunt results in 'Failed to instantiate module' error

3 Answers 3

13 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

3 Comments

Comments

Related