Angular not found when I try to uglify the files

Question

I used grunt and usemin to concatenate and uglify the following:

<!-- build:js /assets/vendor.js -->
<script src="../public/bower_components/angular/angular.min.js"></script>
<script src="../public/bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

So that gave me a vendor.js. I have an app.js that looks like:

(function() {
  'use strict';
  var myApp;

  myApp = angular('myApp', ['ngRoute']);

  myApp.config([
    "$routeProvider", "$translateProvider", "$locationProvider", function($routeProvider, $translateProvider, $locationProvider) {
      $routeProvider.when("/login", {
        templateUrl: "/templates/login.html"
      }).otherwise({
        redirectTo: "/login"
      });
      return $locationProvider.html5Mode(true);
    }
  ]);

}).call(this);

For some reason, it says angular is not a function when I run it. If anyone needs it, my uglified and concatenated angular scripts are at: https://gist.github.com/shamoons/b41855b7bd3acb94325d

drew_w · Accepted Answer · 2014-05-08T18:58:59.130

The code should actually read:

myApp = angular.module('myApp', ['ngRoute']);

You have tried to call angular as a function which is why you are getting that error!

An example

I went so far as to create an angular page based on your grunt minified file (downloaded from the link). Everything worked well.

HTML

<html ng-app="app">
  <body ng-controller="test">
    {{test}}

    <script src="angular-gruntmin.js" type="text/javascript"></script>
    <script src="test.js" type="text/javascript"></script>
  </body>
</html>

Javascript

var app = angular.module('app', []);
app.controller('test', function ($scope) {
   $scope.test = "ABCDEFG";
});

You can see that in a plunker here: http://plnkr.co/edit/0fX0wwulbWBS8Plbmarl?p=preview

Wow! So dumb! Thanks for the catch! – Shamoon May 08 '14 at 18:50 — Shamoon, May 08 '14 at 18:50

Angular not found when I try to uglify the files

1 Answers1