Angularjs，Typescript，Uglify 无法实例化模块 myApp .... 未知提供者：a答案

【问题标题】：Angularjs, Typescript, Uglify Failed to instantiate module myApp .... unknown provider: aAngularjs，Typescript，Uglify 无法实例化模块 myApp .... 未知提供者：a
【发布时间】：2014-09-24 13:11:39
【问题描述】：

我在使用带有 angularjs 的 typescript 注入自定义服务时收到此错误。生成的 typescript 转译的 JavaScript 已通过 uglify 运行。该应用在未使用 uglify 部署时可以正常工作。

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module MyModule due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.2.21/$injector/unpr?...<omitted>...2)

请参阅 plunker：http://plnkr.co/edit/mX7TCPAO3VycUp4Nw2Oy?p=preview

我知道它可以通过更改 uglify 选项来移除 mangle，但我想保留 mangle。

任何帮助将不胜感激:-)

【问题讨论】：

标签： javascript angularjs dependency-injection typescript

【解决方案1】：

这样做的原因是缩小替代了输入参数名称和函数名称。所以在你的情况下

var LocationService = (function () {
        function LocationService($rootScope) {
            $rootScope.foo = 123;
        }
        LocationService.prototype.log = function (msg) {
            console.log(msg);
        };
        LocationService.$inject = ['$rootScope'];
        return LocationService;
    })();

缩小到

var b=function(){function a(a){a.foo=123}... 
a.$inject=["LocationService"]

所以LocationService被重命名为“b”，你的代码仍然试图注入“LocationService”，这显然不存在。

一种选择可能是使用 ngMin 或 ngAnnotate 之类的东西（我没有尝试过这些），但我个人的偏好是使用内联数组表示法来声明依赖关系来避免这个问题。

【讨论】：

a.LocationService = b，但 LocationSercice 仍然存在。调试 MyModule.LocationService 时存在。我不确定如何使用 ngMin、ngAnnotate，因为这些控制器是从 typescript 类自动生成的，这就是我使用 $inject = ["LocationService"] 的原因。

【解决方案2】：

这是因为 uglifier 试图注入一个名为 a 的对象，而没有告诉 Angular 注入器该对象在 $inject 寄存器中的名称。

在 uglify 之前使用 ngMin。

使用（编辑）：

var config = (function() {
  function modConfig($routeProvider) {
    $routeProvider.when('/', {
        controller: 'MainController',
        templateUrl: 'sub.html'
    });
  }
  modConfig.$inject = ['$routeProvider'];
})();
angular.module('MyModule', ['ngRoute']).config(config);

【讨论】：

我明确地使用 $inject 来告诉 Angular 服务名称。不确定 ng-min 在这种情况下是否有效
你忘了在 MyModule 中注入 $routeProvider :)
无法让它工作:-(你有没有机会改变 plunker 来纠正我的尝试?? :-)
好的，用这个就可以了； angular.module('MyModule', ['ngRoute']) .config(['$routeProvider',function ($routeProvider) { $routeProvider.when('/', { controller: 'MainController', templateUrl: 'sub.html' }); }]) .service('LocationService', My_Module.LocationService) .controller('MainController', My_Module.MainController);
当然，这就是你应该使用 ngmin 而不是混合 $inject 和注入数组。