How to resolve issue with angular LocalStorageModule failing with $injector:modulerr message after ngmin

Question

I went through the yeoman tutorial and when I execute grunt serve the resulting app works fine. However it fails when I execute grunt serve:dist. The error message is:

Uncaught Error: [$injector:modulerr] Failed to instantiate module mytodoApp due to: Error: [$injector:unpr] Unknown provider: a

In my app.js file if I comment out the call to configure (which sets the prefix) then the issue goes away:

angular.module('mytodoApp', ['LocalStorageModule', 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.sortable'])
.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
    localStorageServiceProvider.setPrefix('ls');
}])
.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
});

Answer 1

wrapping my app.js file as follows resolved the issue:

(function() {
    var app = angular.module('mytodoApp', ['LocalStorageModule','ngCookies','ngResource','ngSanitize','ngRoute','ui.sortable']);
    app.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
        localStorageServiceProvider.setPrefix('ls');
    }]);
    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
}.call(this));

Answer 2

I had the same issue. As suggested by Eddie, I ended up combining the two .config sections like so:

.config(function ($routeProvider, localStorageServiceProvider) {
    localStorageServiceProvider.setPrefix('ls');

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Answer 3

You need to wrap the second .config() block in ngMin safe code:

angular.module('mytodoApp', ['LocalStorageModule', 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.sortable'])
.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
    localStorageServiceProvider.setPrefix('ls');
}])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

Or combine the two blocks.