map7 map7 - 1 month ago 14
CoffeeScript Question

ngannotate-rails not working in development mode

I'm using ngannotate-rails to help get angular code to work in a compressed format. This is in a Rails 3.2 + Angular 1.5.x app.

I've added the following to my Gemfile and ran bundle

group :assets do
gem 'sprockets-derailleur', '~> 1.0.0' # Speed up precompiles with multi-core compile
gem 'turbo-sprockets-rails3', '~> 0.3.14' # Compile only changed assets
gem 'sass-rails', ' ~> 3.2' # Main CSS extension in use
gem 'less', '~> 2.6.0' # Less required for ui-utils plugin for AngularJS
gem 'therubyracer', '~> 0.12.1' # v8 library required for less
gem 'coffee-rails' # Language which compiles into JS
gem 'uglifier' # JS parser, minifier, compressor or beautifier toolkit

gem 'ngannotate-rails', '~> 1.2' # AngularJS minifier
end


Then in config/environments/development.rb I've added the following

if ENV['NG_FORCE'] == 'true'
config.assets.compress = true
config.assets.compile = true
config.assets.digest = true
config.assets.debug = false

# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.precompile += %w(*.css *.js *.woff *.eot *.svg *.ttf) # The fix for font-awesome

else
# Do not compress assets
config.assets.compress = false

# Expands the lines which load the assets
config.assets.debug = true
end


I then do the following commands but ng-annotate is not annotating

NG_FORCE=true RAILS_ENV=development bundle exec rake assets:clean assets:precompile:primary
NG_FORCE=true rails s


I check the compiled output in public/assets/.../ and I get this at the top;

(function(){var e;e=function(e,n,t,i,o,c,r,a,u,d,s,l,v,f,g,h,m,p,b,k,y,I,T,E,q,w,A){var D,P,F,x,j;


It's minified but not annotated with the strings so AngularJS throws this error;

application-57db964b9323e90284f1f3c331c9c3aa.js:43 Error: [$injector:unpr] Unknown provider: eProvider <- e <- InvoicesController
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20InvoicesController
at http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:41:28591
at http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:16654
at Object.r [as get] (http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:15610)
at http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:16739
at r (http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:15610)
at o (http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:15910)
at Object.s [as instantiate] (http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:42:16247)
at http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:43:9470
at http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:98:32136
at Object.<anonymous> (http://localhost:3000/assets/application-57db964b9323e90284f1f3c331c9c3aa.js:47:31053) <div id="wrapper" class="ui-wrapper ng-scope" ui-view="">


UPDATE

InvoicesController

InvoicesController = ($scope, $http, $location, $state, $stateParams, $uibModal, $timeout, flash, Invoice, Division, Costing, Job, JobService, Common, ShortcutService, InvoiceService, TimesheetService, DisbursementService, DebtorService, SearchService, LineItemService, DateService, $filter, $mdDialog, $mdMedia, Restangular, hotkeys) ->

<Snip: Too long>
switch $state.current.name
# Index

when "invoices"
$scope.query = SearchService.getFilter('invoices')
page = SearchService.getPage('invoices')

if ($scope.query)
# Filter already exists
$scope.filterForm = true
getInvoices(angular.extend({}, $scope.query, {page: page, limit: 10, search: $scope.query}))
else if page > 0
$scope.query = { order: '-invoice_no', limit: 10, page: page }
$scope.onPaginate(page, 10)
else
$scope.resetFilter()

<Snip>

angular
.module('paisApp')
.controller('InvoicesController', InvoicesController)

Answer Source

Although it might have been cut off in your snippet above, I don't see where you would have provided the "ngInject" directive in you code.

I would expect your controller code to look like

MyController = ($scope, ...) ->
  "ngInject"
  # etc

It's the "ngInject" that ng-annotate looks for as the hook in points when transpiling the code.