CODEWITHSUNDEEP
angularjsasp.net-mvctypescriptangular-ui-bootstrap
semprini
semprini

Reputation: 141

TypeScript minified breaks Angular UI Modal

I have an MVC application with lots of Angular code. I have an Angular service that creates an Angular UI modal. The pertinent code is:

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

The controller (snippet) is:

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

Now, in my dev env, this works fine. The modal pops up, the controller has the $uibModalInstance and modalOptions parameters correctly injected. In Production, with bundling enabled, it breaks - in that nothing happens at all. No console error either.

If I uncomment the static inject line on the controller, then it breaks in dev and in Production the modal pops up but doesn't work correctly because presumably it's not the modal instance instantiated by the service as the modalOptions parameter remains undefined.

My question is, how can I minify this code and still have the correct instance of $uibModalInstance injected? Hopefully I'm missing something very simple and all the hair that has been pulled today has been a mere exercise in frustration.

Upvotes: 0

Views: 293

Answers (1)

Ben
Ben

Reputation: 2706

I would suggest that you use what is known as safe or inline dependency injection annotation.

For example in your controller:

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

This will preserve the dependency names when you minify your code.

Upvotes: 1

Related Questions