TypeScript 缩小了 Angular UI 模态答案

【问题标题】：TypeScript minified breaks Angular UI ModalTypeScript 缩小了 Angular UI 模态
【发布时间】：2017-08-16 10:36:34
【问题描述】：

我有一个包含大量 Angular 代码的 MVC 应用程序。我有一个创建 Angular UI 模式的 Angular 服务。相关代码为：

export class ConfirmRenderingOfLargeResultsModalService {

    static $inject = ["$uibModal"];
    constructor(private $uibModal: any) {
    }

    public open(options: LargeResultSetModalOptions): ng.IPromise<LargeResultsModalAction> {
        var modalInstance = this.$uibModal.open(
            {
                templateUrl: "myTemplate.html",
                controller: "ConfirmRenderingOfLargeResultsModalController",
                controllerAs: "confirmRenderingOfLargeResultsModalController",
                backdrop: "static",
                resolve: {
                    modalOptions: () => options
                }
            });

        return modalInstance.result.then((action: LargeResultsModalAction) => {
            return action;
        });
    }
}

angular.module("My.Module").service("Services.ConfirmRenderingOfLargeResultsModalService", Services.ConfirmRenderingOfLargeResultsModalService);

控制器（sn-p）是：

export class ConfirmRenderingOfLargeResultsModalController {
    public confirmRenderingOfLargeResultsModalController: ConfirmRenderingOfLargeResultsModalController = this;

    //static $inject = ["$uibModalInstance"];
    constructor(private $uibModalInstance: any, private modalOptions: LargeResultSetModalOptions) {

    }

    public ok(): void {
        this.$uibModalInstance.close(LargeResultsModalAction.Continue);
    }

    // more methods not shown
}

angular.module("My.Module").controller("Services.ConfirmRenderingOfLargeResultsModalController", Services.ConfirmRenderingOfLargeResultsModalController);

现在，在我的开发环境中，这可以正常工作。模态弹出，控制器正确注入了 $uibModalInstance 和 modalOptions 参数。在生产中，启用捆绑时，它会中断-根本没有任何反应。也没有控制台错误。

如果我取消注释控制器上的静态注入行，那么它会在开发和生产中中断，模式会弹出但无法正常工作，因为它可能不是服务实例化的模式实例，因为 modalOptions 参数仍未定义。

我的问题是，我怎样才能缩小这段代码并仍然注入正确的 $uibModalInstance 实例？希望我遗漏了一些非常简单的东西，今天拔掉的所有头发都只是一种沮丧的练习。

【问题讨论】：

您在使用控制器中的服务吗？我没有看到它被注入。我想知道为什么你甚至需要在控制器中使用$uibModalInstance。
在您的 $inject 中，我看到您只传递了 '$uibModalInstance' 而不是 modalOptions。两者都不需要吗？
是的，我只包含了构造函数。控制器上有一些方法，例如： public ok(): void { this.$uibModalInstance.close(LargeResultsModalAction.Continue); }
您实际上是如何声明您的控制器/服务实例的？我在您的代码示例中看不到这一点。您应该考虑使用“安全”或“内联”注释来声明它们——这将防止潜在的错误被缩小。如果您使用像 Grunt/Gulp 这样的任务运行器，请查看 ng-annotate 库。它将为您省去很多麻烦：github.com/olov/ng-annotate
@Mickers - modalOptions 参数由 uibModal 配置的 resolve 部分注入。

标签： angularjs asp.net-mvc typescript angular-ui-bootstrap

【解决方案1】：

我建议您使用所谓的安全或内联依赖注入注解。

例如在您的控制器中：

angular.module("My.Module")
    .controller("Services.ConfirmRenderingOfLargeResultsModalController", ["uibModalInstance", "modalOptions", Services.ConfirmRenderingOfLargeResultsModalController]);

这将在您缩小代码时保留依赖项名称。

【讨论】：

感谢 Ben，这很奏效。我们曾经使用这种注入方法，但后来迁移到静态注入，但我想根据文档，内联方法是首选方法是有原因的。
静态注入方法很不错，因为你只需要声明一次，而这种方法则需要两次声明所有依赖项。但是，我一直发现这是在代码缩小期间保留依赖项名称的最佳方法。