Controller inheritance in Typescript with minification causing Error: $injector:unpr Unknown Provider

Question

更新 2019/07/16

我的问题其实是$inject使用不当造成的。我在 api-service.ts 中将它用作 private $inject 但它应该是 public static $inject = [...]。丑化时，它依赖于显式注入，但 private $inject 使其隐式

我对这个也有同样的问题。我的错误消息没有 tProvider 未知，而是具有特定的提供者名称，但看起来像

Unknown provider: eProvider <- e <- api-service <- baseDI-service

其中 api-service 和 baseDI-service 是同一模块的命名和注册服务。

我的模块如下所示：

module
--api-service
--other-services
--baseDI-service
--componentA
----controllerA extends BaseController
--componentB
----controllerB extends BaseController

我在 baseDI-service 中导入 api-service 和其他服务，我将其用作服务容器，因为我不想在 componentA 的 super() 中传递很多参数，例如.

所以在 componentA 中它看起来像：

...
class ComponentAController extends BaseController {
    public static $inject = ['baseDI-service', ...];

    constructor(baseDIService: BaseDIService) {
        ...
        super(baseDIService); 
        ...
    }
}

BaseDIService.ts:

export default class BaseControllerDIService {
    public static $inject = ['api-service', '$http', ...];
    constructor(
        private apiSvc: ApiService,
        private $http: ng.IHttpService,
        ...
    ) {}

    public getBaseClassDependencies() {
        return{
            apiService: this.apiSvc,
            $http : this.$http
            ... : ...
        };
    }
}

BaseController.ts

export default class BaseController implements ng.IComponentController {    
    apiService: ApiService;
    $http: ng.IHttpService;

    constructor(
        baseDIService: BaseDIService
    ) {
        const services = baseDIService.getBaseClassDependencies();
        this.$http = services.$http;        
        this.apiSvc = services.apiService;
        ...
        this.otherService = services.otherServices;
        ...
    }

Grunt Uglify 缩小后，错误类似于 Unknown provider: serviceAProvider <- serviceA。没有缩小，一切都好。

在这种方式之前，我也试过用$injector在controllerA中用baseDI-service传递给super()，在BaseController中我用$injector.get('api-service') ，我只在缩小时遇到了同样的问题。

谁能告诉我为什么我在 Uglify 缩小模式下尝试的两种方法都失败了，如何解决？顺便说一句，我确实需要缩小。

此外，为 AngularJS 使用控制器继承是一种好习惯吗？

Answer 1

为了帮助您在丑化之前发现此类问题，请使用严格依赖注入。

来自文档：

Using Strict Dependency Injection

You can add an ng-strict-di directive on the same element as ng-app to opt into strict DI mode:
<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
  I can add: {{ 1 + 2 }}.
  <script src="angular.js"></script>
</body>
</html>
Strict mode throws an error whenever a service tries to use implicit annotations.

有关详细信息，请参阅

AngularJS Developer Guide - Strict Dependency Injection

Controller inheritance in Typescript with minification causing Error: $injector:unpr Unknown Provider

Controller inheritance in Typescript with minification causing Error: $injector:unpr Unknown Provider

minify

angularjs

typescript

angularjs-controller

grunt-contrib-uglify

Using Strict Dependency Injection