使用grunt进行角度缩小会导致“无法实例化模块”错误

Posted 2021-04-15

我知道设置一个控制器，服务，模型等来准备缩小。我有大约20个控制器，模型和服务作为单独的文件，我想将它们缩小并连接成一个JS文件进行生产。

要了解我如何设置这些文件，这是一个示例：

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

缩小后，我收到错误

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

如果我点击错误链接，它会说Unknown provider: a

这是我的模块创建的地方

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);

我可能没有在创建模块的上述代码中进行适当的缩小准备吗？

这是我的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']);
};

答案

您的.config肯定是问题之一。仔细检查并确保代码中的任何地方都注入了正在使用内联缩小的服务/提供程序。

这是一个注入一个提供程序的配置（这个例子只是$ logProvider）在缩小后看起来像：

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

什么时候真的应该是这样的：

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

这是一个codepen：http://codepen.io/troylelandshields/pen/xGjKGV

另一答案

你的VforumJsConfig就是问题所在

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

函数参数变小，而角度不知道从哪里注入它们。您需要将它们作为字符串提供（就像您的其他函数一样），因为字符串在缩小时不会被更改。

来自文档：https://docs.angularjs.org/tutorial/step_05#a-note-on-minification

所以你需要在VforumJsConfig的定义之后添加：

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

另一答案

使用VforumJsConfig的数组语法，以便显式定义依赖关系，而不是将被缩小的参数名称隐含。代替：

var VforumJsConfig = function($routeProvider, $locationProvider, 

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

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

尝试：

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

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