I have searched the internet for howto add google analytics to a ionic project. There are lot of different plugins for cordova ect, but didn't get even one to work. Maybe i'm doing something wrong, hope somebody can help.
What i got now works on the ionic serve --lab option. But not when its installed on the phone. I also didn't got any errors in the console (--lab and Phone). Debug also does not load when connected with inspect. So i'm not sure whats going one here...
Index.html
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js" ></script>
<script src="js/openfb.js"></script>
<script src="js/ngopenfb.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'js/analytics.js', 'ga');
ga('create', 'XX-XXXXXXX-XX', 'auto');
</script>
</body>
</html>
App.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
},
pageTitle: '[app] Dashboard'
})
Controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function ($rootScope, $scope, $window, $http, FB) {
$rootScope.token = window.localStorage.getItem("token");
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
$window.ga('send', 'pageview', {page: toState.pageTitle})
})
Angulartics is a good library for integrating google analytics with angular. It can be made to work with Ionic in a simple manner. First, add the libraries.
ionic plugin add cordova-plugin-google-analytics --save
bower install angulartics-google-analytics --save
Include angulartics scripts in index.html. The trick is using the (as yet) undocumented angulartics cordova google analytics plugin.
<!-- angulartics -->
<script src="bower_components/angulartics/src/angulartics.js"></script>
<script src="bower_components/angulartics/src/angulartics-ga-cordova-google-analytics-plugin.js"></script>
<!-- angulartics google analytics -->
<script src="bower_components/angulartics-google-analytics/lib/angulartics-ga.js"></script>
Then, in your app.js, include the modules and set the tracking id in config block
angular.module('app', [
'ionic',
// Include angulartics modules
'angulartics',
'angulartics.google.analytics',
'angulartics.google.analytics.cordova'
])
// Add config block
.config(function (googleAnalyticsCordovaProvider) {
googleAnalyticsCordovaProvider.trackingId = "UA-******-*";
})
That's it. It should just work now.
I got it working but i dont think its best practice.
In de Main controller.
function _waitForAnalytics() {
if (window.analytics) {
window.analytics.startTrackerWithId('XX-XXXXXXX-XX');
window.analytics.trackView('Start');
console.log("Analytics success");
} else {
console.log("Analytics not loaded");
setTimeout(function () {
_waitForAnalytics();
}, 10000);
}
}
_waitForAnalytics();
Strange because the device ready should do this.
Related
I'm trying to use Angular UI modal, but I keep getting an unknown provider error message: "Error: [$injector:unpr]".
I use custom build to minimize the overall size of the file. I have injected the ui dependency in the app when creating it. The build files are added to the index.html page.
//This is the app.js file
(function() {
angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
angular
.module('locatorApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
//This is the controller file
(function() {
angular
.module('locatorApp')
.controller('locationDetailCtrl', locationDetailCtrl);
/*Inject $routeParams service into controller to protect from minification*/
locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData'];
function locationDetailCtrl($routeParams, $uibModal, locatorData) {
var vm = this;
vm.locationid = $routeParams.locationid;
locatorData.locationById(vm.locationid)
.success(function(data) {
vm.data = {
location: data
};
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review");
};
}
})();
<!-- This is the index.html file-->
<!DOCTYPE html>
<html ng-app="locatorApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
//This is the locatorData service
(function() {
/*Data service for pulling data from the API*/
locatorData.$inject = ['$http'];
function locatorData($http) {
var locationByCoords = function(lat, lng) {
return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20');
};
var locationById = function(locationid) {
return $http.get('/api/locations/' + locationid);
};
return {
locationByCoords: locationByCoords,
locationById: locationById
};
};
angular
.module('locatorApp')
.service('locatorData', locatorData);
})();
you should use ng-view on a div inside <body>, so script tags will exist after route template is substituted. Then it would be better to reorganize order of script tags you are adding.
At first non-angular script files, then angular, then your sources
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/javascripts/validation.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/angular/angular.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
Then use $uibModal service that you've injected:
vm.popupReviewForm = function() {
$uibModal.open({
template: '...html',
//...config from docs
}).then(function(){console.log('closed successfully');})
.catch(function(){console.log('dismissed modal');});
};
Move your script tag either to below of head tag.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
// Scripts
</head>
or, outside the ng-view :
<body>
<div ng-view></div>
// scripts here
</body>
Ok, I've finally figured it out. The problem was using incompatible versions of Angular JS and Angular UI.
I know it's something simple but I've been trying for hours and can't see what it is. Here is my imports: `
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
and here is the contents of the app file:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I haven't even touched the app.js as of yet so I have no idea where the particular error is coming from
Ultimately, this error happens when Angular is not able to instantiate a module. Typically this happens when there's an issue or (perhaps in this case) a missing dependency.
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
It looks like the starter module is trying to inject starter.controllers and starter.services. However, the scripts referenced in the comments do not appear in your HTML file. Since they don't appear to be used anyway, you could consider removing them
angular.module('starter', ['ionic'])
It also looks you're attempting to use UI Router but, it's not linked in your HTML either - so you'll want to add that as well
<script src="js/angular-ui-router.min.js"></script>
I have a project which utilizes Ionic.io, Cordova and AngularJS. It works nicely on my computer Chrome browser, when I launch it with "ionic serve" on the command prompt. However, when I launch it to my connected android device with "ionic run", all I get is a blank screen. It was supposed to load a login screen. Here is the code:
This is the app.js file
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic','starter.controllers'])
app.run(function($ionicPlatform, $interval) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
$interval(function(){}, 1000);
})
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home',
{
url: '/home',
views:
{
'main_view':
{
templateUrl: 'main.html',
controller: 'appCtrl'
}
}
})
.state('login',
{
url: '/login',
views:
{
'main_view':
{
templateUrl: 'login.html',
controller: 'loginCtrl'
}
}
})
.state('contact',
{
url: '/contact',
views:
{
'main_view':
{
templateUrl: 'contact.html',
controller: 'contactCtrl'
}
}
});
$stateProvider
.state('home.timeline',
{
url: '/timeline',
views:
{
'timeline_tab':
{
templateUrl: 'home_items.html',
controller: 'timelineCtrl'
}
}
})
.state('home.news',
{
url: '/news',
views:
{
'news_tab':
{
templateUrl: 'home_items.html',
controller: 'newsCtrl'
}
}
})
.state('home.bulletins',
{
url: '/bulletins',
views:
{
'bulletins_tab':
{
templateUrl: 'home_items.html',
controller: 'bulletinsCtrl'
}
}
})
.state('home.requests',
{
url: '/requests',
views:
{
'requests_tab':
{
templateUrl: 'home_items.html',
controller: 'requestsCtrl'
}
}
});
});
This is the index.html file, which was supposed to run all the content of the application, starting with the login screen and then changing to the other content screens when logged in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!--<base href="http://www.comunicafacil.net/">-->
<!-- inject:js --><script src="js/api/models/User.js"></script><script src="js/api/models/Request.js"></script><script src="js/api/models/News.js"></script><script src="js/api/models/Image.js"></script><script src="js/api/models/Bulletin.js"></script><script src="js/api/models/Area.js"></script><script src="js/vendor/md5.js"></script><script src="js/api/ComunicaFacilAPI.js"></script><script src="js/api/ComunicaFacil.js"></script><!-- endinject -->
<!-- compiled css output -->
<link href="css/login.css" rel="stylesheet">
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="indexCtrl">
this is the only text that will be displayed on the app screen
<ion-nav-view name="main_view">
</ion-nav-view>
</body>
The cordova version I'm using is 5.4.1, my device is a Samsung Galaxy Tab II, with Android 4.1.2.
Is there anything I need to change to allow the use of ui-route on android?
Is there any other piece of code needed here to identify the issue?
Try putting your
<!-- inject:js --><script src="js/api/models/User.js"></script><script src="js/api/models/Request.js"></script><script src="js/api/models/News.js"></script><script src="js/api/models/Image.js"></script><script src="js/api/models/Bulletin.js"></script><script src="js/api/models/Area.js"></script><script src="js/vendor/md5.js"></script><script src="js/api/ComunicaFacilAPI.js"></script><script src="js/api/ComunicaFacil.js"></script><!-- endinject -->
After <script src="js/controller.js"></script>
The white screen can be caused by any number of issues - as suggested you might want to use remote debugging with chrome (it's awesome btw) to work our whats wrong. You can also use ionic run -l and then type c to get the logs and see the error that way (phone and computer need to be on same wifi network).
My guess here is that your code is bombing on the device because "angular is undefined" or something similar (the order matters!)
In my angularjs project, I have the following files:
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- Custom Libraries -->
<script src="lib/Shake.js"></script>
<!-- your app's js -->
<script src="js/services/CloudDatabases.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
/js/apps.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
// Register stopping and starting analytics on app open and close
document.addEventListener("pause", window.analytics.Stop(), false);
document.addEventListener("resume", window.analytics.Start(), false);
// Exit the application if you go offline
document.addEventListener("offline", function(){}, false);
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
....
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
/js/services/CloudDatabases.js
angular.module('starter.services')
.service('CloudDatabases', ['$http', function ($http) {
var urlBase = '/api/customers';
this.getDatabases = function () {
console.log('CloudDatabases.getDatabases();');
return 'test getDatabasesResponse';
};
}])
/js/controllers.js
angular.module('starter.controllers', ['CloudDatabases'])
// Login controller
.controller('LoginCtrl', function($scope, $ionicLoading, $http, $ionicPopup, $rootScope, $state, $ionicViewService, CloudDatabases) {
CloudDatabases.getDatabases();
// Form data for the login modal
$scope.loginData = {};
// Try loading the loing data from storage if the user has already logged in
$scope.loginData.username = window.localStorage['username'] || '';
$scope.loginData.password = window.localStorage['password'] || '';
$scope.loginData.uk = window.localStorage['uk'] || false;
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
// Show the loading overlay so the user knows we are busy
$ionicLoading.show({template: 'Loading...'});
// Save the login data to local storage so if the user closes the app they
// don't have to re-enter it
window.localStorage['username'] = $scope.loginData.username;
window.localStorage['password'] = $scope.loginData.password;
window.localStorage['uk'] = $scope.loginData.uk;
// Build login JSON from form
var login_json = JSON.stringify({auth: {passwordCredentials: {username: $scope.loginData.username, password: $scope.loginData.password}}});
// POST the actual authentication request
$http({
method: 'POST',
url: 'https://identity.api.rackspacecloud.com/v2.0/tokens',
data: login_json,
headers: {'Content-Type': 'application/json'}
}).then(function(response) {
// Save the auth token and tenant id for later use
$rootScope.userData = [];
$rootScope.userData.Token = response.data.access.token.id;
$rootScope.userData.Tenant = response.data.access.token.tenant.id;
$rootScope.userData.RawServices = response.data.access.serviceCatalog;
// Use viewservice to hide back button on next page and remove login from nav stack
$ionicViewService.nextViewOptions({
disableBack: true
});
// Track successful logins
window.analytics.trackFeature("Login.Success");
$ionicLoading.hide();
// Navigate to Servers page
$state.go('app.servers');
},
function(response) {
// Track failed logins
window.analytics.trackFeature("Login.Failure");
$ionicLoading.hide();
});
};
})
....
But this throws an error saying that it can't be injected.
Can anyone help with why that might be? It says that starter.services isn't defined
The error is because of your service definition. You are using service definition without dependency array [] as second parameter. This tells angular to treat it as getter method for module starter.services instead of defining the module. Use below code for starter.services to fix this.
angular.module('starter.services', [])
.service('CloudDatabases', ['$http', function ($http) {
var urlBase = '/api/customers';
this.getDatabases = function () {
console.log('CloudDatabases.getDatabases();');
return 'test getDatabasesResponse';
};
}])
I am getting problems with building my Angular JS project.
It says
Failed to instantiate module ngAnimate due to:
I have put all my services into [] but the ngAnimate is not working.
Here is the app
Failed to instantiate module ngAnimate due to:'use strict';
/* global app:true */
var app = angular
.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ngAnimate',
'firebase'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/posts/:postId', {
templateUrl: 'views/showpost.html',
controller: 'ViewPostCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.constant('FIREBASE_URL', 'https://scorching-fire-4068.firebaseio.com/');
app.directive('post', function() {
var controller = function($scope) {
$scope.showAnswer = false;
};
return {
restrict: 'C',
scope: false,
controller: controller
};
});
app.animation('.answer-animation', function(){
CSSPlugin.defaultTransformPerspective = 1000;
TweenMax.set($("div.back"), {rotationX:-180});
$.each($("div.box"), function(i,element)
{
console.log(element);
var frontCard = $(this).children("div.front")
var backCard = $(this).children("div.back")
var tl = new TimelineMax({paused:true})
tl
.to(frontCard, 1, {rotationX:180})
.to(backCard, 1, {rotationX:0},0)
this.animation = tl;
});
return {
beforeAddClass: function(element, className, done){
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.play();
}
else {
done();
}
},
beforeRemoveClass: function(element, className, done) {
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.reverse();
}
else {
done();
}
}
};
});
And the index.html script tags
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="scripts/app.js"></script>
<script src='scripts/services/posts.js'></script>
<script src="scripts/filters/url.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/controllers/postview.js"></script>
<script src="scripts/controllers/nav.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
<!-- endbuild -->
Ok so this is the answer,
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
Were both external library loads, which meant they couldn't go through the minification process.
I solved this by installing the libs through bower, and adding them like it.
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/greensock/src/minified/TweenMax.min.js"></script>
Just adding this in case it helps someone else!
I had the same problem but my cause was that I had the src in the script tag for angular-animate incorrect - I'd pasted bower_components/angular/angular-animate.js not the correct reference which was:
<script src="bower_components/angular-animate/angular-animate.js"></script>