Include AngularJS partial templates in Closure Compiler output

Question

I'm just starting out with AngularJS (1.4.7) and hoping to produce a concise build output using Closure Compiler for a new application.

I'm successfully generating a single output file containing all my application's JavaScript preceded by each of the libraries on which it depends.

However, my application uses ngRoute and this is loading a controller and a partial html template for each route when visited. Each template is loaded as required so the first time a route is used there is a delay as the template downloads.

I'm used to working with RequireJS in which a template can be treated as a resource and bundled into the compiled build product, however I don't see a way to do this with Angular and Closure.

I assume this is a problem that has previously been addressed but I've had a very hard time finding relevant information via Google.

Is it possible to include partial templates in a build product, produced either with Closure Compiler or some other tool?

Answer 1

The best way to handle this is a two step process:

1. Use the r.js optimizer to order your dependencies and create a single JS file.
2. Use closure-compiler to compress the output file from r.js.

The require js optimizer is available as both a grunt and gulp plugin.

With gulp, you would simply pipe the requirejs output into a compilation task. For grunt, you'll need to set the optimize property to none and generate an intermediate file. The intermediate file will be your js input file for closure-compiler.