【问题标题】:ngannotate-rails not working in development modengannotate-rails 在开发模式下不工作
【发布时间】:2018-01-23 01:02:02
【问题描述】:

我正在使用 ngannotate-rails 来帮助 Angular 代码以压缩格式工作。这是在 Rails 3.2 + Angular 1.5.x 应用程序中。

我已将以下内容添加到我的 Gemfile 并运行 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

然后在 config/environments/development.rb 我添加了以下内容

  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

然后我执行以下命令,但 ng-annotate 没有注释

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

我检查了 public/assets/.../ 中的编译输出,我在顶部得到了这个;

(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;

它被缩小但没有用字符串注释,所以 AngularJS 会抛出这个错误;

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="">

更新

发票控制器

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)

【问题讨论】:

  • 分享您的 InvoicesController 代码
  • 我没有在控制器顶部看到任何“ngInject”,这是您希望它注释的位置吗?

标签: ruby-on-rails angularjs ruby coffeescript


【解决方案1】:

虽然它可能已在您上面的 sn-p 中被切断,但我看不出您会在代码中的何处提供“ngInject”指令。

我希望你的控制器代码看起来像

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

在转译代码时,ng-annotate 会寻找 "ngInject" 作为钩子点。

【讨论】:

  • 我的代码中没有“ngInject”,因为我认为这仅适用于 ES6,而我正在使用咖啡脚本。我猜coffeescript必须编译成ES6,我必须把那行放进去。谢谢。
  • 我认为这与 es6 无关。我也将它与 coffeescript 一起使用,但基本上 npm 模块使用这些代码点来识别您想要设置注入的位置。如果您查看 npm 文档,还有其他方法可以做到这一点,但我发现这种方法使用 coffeescript 是最好和最整洁的。 :)
猜你喜欢
  • 1970-01-01
  • 2021-03-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-29
相关资源
最近更新 更多