CODEWITHSUNDEEP
javascriptangularjstypescriptgoogle-closure-compiler
Skintkingle
Skintkingle

Reputation: 1579

Minifying with Google Closure Compiler an AngularJs app written in Typescript

I've been writing an AngularJs app using Typescript in Visual Studio. Typescript compiles all files into a single file on build. We've added a post-build step on release for the google closure compiler to minify the single file output. Any option other than WHITESPACE_ONLY on --compilation_level parameter causes the application to fail to initialize. the nested module names for example of my.module.name { } become function(a){ function(a) { function (a) { when minified. this is causing an angular error when it's injecting in typescript the final injection entry is a "modulename.classname" reference. AngularJs fails to initiate this minified as it becomes a.classname. See below example of how it's written, and how it's minified. myApp is in a my.module module, and the controller is in a sub-module called my.module.name

myApp.controller("myController", ["$scope", "myService", "myService2", name.myControllerClass]);

this works fine if we understand that myControllerClass is a class that's written as a controller, in the my.module.name module in a .ts file. (it's all referenced fine too, and works when not minified)

when minified with anything other than WHITESPACE_ONLY the output becomes:

(function(a){(function(a){var d=angular.module("MyModule",[]);
d.controller("myController", ["$scope", "myService", "myService2", a.myControllerClass]);

angular fails to initialise saying that a doesn't contain myControllerClass. It makes sense as a in this instance would be "my.module" not "my.module.name"

Has anyone come across this before and does anyone know a solution that allows minification past "WHITESPACE_ONLY" which is kind of not good enough for our situation. It doesn't have to be google closure compiler that is minifying, but minification of our typescripted angularJs application output is a necessity. It seems like a Typescript minification issue for how it outputs its namespaced module stuff, and then how a minifier interprets it but I'm not sure.

Upvotes: 1

Views: 630

Answers (1)

Claies
Claies

Reputation: 22323

The angular framework provides a specialty directive that is designed to help identify potential issues with Dependency Injection: ng-strict-di.

Strict mode throws an error whenever a service tries to use implicit annotations.

Adding the ng-strict-di method to your bootstrap, either by including it with ng-app (<body ng-app="myApp" ng-strict-di>) or by setting strictDi: true when manually bootstrapping will enable strict mode.

Strict mode does not modify the code and is production safe. Using strict mode allows you to identify potential problem areas with dependency injection which are not minification safe.

Upvotes: 3

Related Questions