web-dev-qa-db-fra.com

Angular "Fournisseur inconnu" après minification avec Grunt Build dans l'application Yeoman

J'ai des problèmes avec grunt build sur une Yeoman générée Angular, utilisant Coffee et Slim, avec toutes les bibliothèques à jour. (L'application vient d'être générée il y a quelques jours avec le générateur le plus récent.)

grunt build et grunt server les deux ont bien fonctionné au départ. Mais après quelques jours de développement en utilisant grunt server, J'ai découvert que grunt build avait complètement cessé de fonctionner.

Il y a eu quelques problèmes différents que j'ai corrigés. Le plus important a été que j'ai dû abandonner Slim pour mon fichier d'index et utiliser du HTML pur, car grunt build supprimait inexplicablement 80% du fichier d'index lors de sa publication sur /dist.

Malheureusement, après avoir presque tout résolu, j'ai commencé à obtenir cette erreur dans l'une de mes directives Angular:

Erreur non détectée: fournisseur inconnu: aProvider <- a

Le problème semble être dans uglify. Je pense que cela pourrait être le même problème signalé ici , mais je ne suis pas absolument sûr. J'ai essayé un certain nombre de solutions, mais la seule chose qui a fonctionné pour moi a été de générer manuellement des fichiers js propres à partir de mon coffeescript, de copier les fichiers dans /dist, puis écrivez les chemins d'accès dans dist/index.html.

Évidemment, ce n'est pas optimal. Je suis sûr qu'il existe une façon plus nette de le faire dans Grunt (probablement en supprimant entièrement la minification du processus de construction, comme cet autre utilisateur l'a fait dans le lien ci-dessus), mais je suis nouveau dans ce domaine et je n'ai pas encore compris comment pour faire ça. Quoi qu'il en soit, ce serait une solution de contournement.

Mon Gruntfile est assez basique: je n'ai ajouté que grunt-connect-proxy, grunt-contrib-sass et grunt-slim au fichier par défaut. En fait, j'ai essayé d'apporter un Gruntfile propre et nouvellement généré, mais il ne s'est pas amélioré.

La directive qui échoue est ci-dessous. L'erreur se produit en fait directement dans la première ligne du contrôleur, $scope.showInput = false. Ce qui est frustrant, c'est que tout fonctionne très bien dans grunt server. Mais au moment où je construis, il s'effondre complètement.

myModule.directive "editable", ->

  controller = ($scope) ->
    $scope.showInput = false

    $scope.saveContent = -> 
      $scope.toggleContent()
      $scope.save()

  linker = (scope, element, attrs) ->    
    scope.toggleContent = -> 
      scope.showInput = not scope.showInput
      setTimeout((-> element.find('input').focus()), 100)

  return DDO = 
    restrict: 'E'
    controller: controller
    link: linker
    templateUrl: "template/editable.html"
    scope:
      editableType: "@"
      text: "="
      placeholder: "@"
      save: "&"

(Le modèle n'est pas vraiment important. Il a juste un ng-switch qui bascule en utilisant $scope.showInput.)

Si quelqu'un a des suggestions, je l'apprécierais.

javascriptangularjsgruntjsyeomanuglifyjs
31
javbotero

Cela ressemble au problème commun de la dépendance d'Angular sur le nom des arguments pour l'injection de dépendance. Assurez-vous que lorsque vous passez des dépendances, vous incluez les noms de dépendance sous forme de chaînes afin que Angular sache quoi injecter après la minification (puisque les valeurs de chaîne ne seront pas modifiées dans le processus de minification).

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

}])

De Angular docs: ne note sur la minification

46
m59