Search code examples
javascriptangularjsgruntjsuglifyjs

Angular not found when I try to uglify the files


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


Solution

  • 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