compiling clojurescript and angularjs in advanced mode

Question

I am having problems with getting a simple clojurescript program to compile right in advanced mode. For example, here is a simple program

(ns cljs-basics.core)

(.write js/document "hello, cljs")

(def basicsApp (.module js/angular "basics" (array)))

(def testController 
  (.controller basicsApp "TestCtrl" (fn [$scope])))
(aset testController "$inject" (array "$scope"))

and the html file:

<!doctype html>
<html ng-app="basics" lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple CLJS</title>
    <script src="components/angular/angular.js"></script>
    <script src="js/basic.js"></script>
</head>
<body ng-controller="TestCtrl">
    {{testvar}}
</body>
</html>

the code is running fine on :simple but when I turn on :advanced, it just does not work. The .controller and .module calls gets compiled to symbols and so I get

Uncaught TypeError: Object #<Object> has no method 'Uf' basic.js:5105
Uncaught Error: No module: basics

Is there a way to somehow include the angular.js file so that the compiler can minify everything together?

jbouwman jbouwman · Accepted Answer · 2013-07-17T15:52:58

If you include the appropriate 'externs' file, :advanced mode compilation won't rename symbols defined in the external library. The externs file for angular can be found at:

https://code.google.com/p/closure-compiler/source/browse/contrib/externs/angular.js

If you're using cljsbuild, the Leiningen compiler configuration looks like the following:

:cljsbuild {
    :builds [
        {
            :source-paths ["src"]
            :compiler {
                :output-to "target/main.js"
                :optimizations :advanced
                :externs ["externs/angular.js"]
            }
        }
    ]
}

compiling clojurescript and angularjs in advanced mode

3 Answers