Gulp uglify导致AngularJS无法解决提供程序

Gulp uglify causing AngularJS to not solve provider

本文关键字：解决 程序 uglify 导致 AngularJS Gulp      更新时间：2023-09-26

虽然我在使用Angular时熟悉uglify问题，但我现在通过一个特定的指令再次遇到了这个问题，尽管我使用类似数组的样式进行依赖声明：

angular.module('app.directives').directive('domainImg', ['Endpoint', function (Endpoint) {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs) {
            $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
        }
    };
}]);

我的主文件分别声明了这些模块。

angular.module('app.providers', []).constant('Endpoint', 'http://www.multzfidelidade.com.br/sistema/');
angular.module('app.tools', []);
angular.module('app.services', []);
angular.module('app.resources', []);
angular.module('app.controllers', []);
angular.module('app.directives', []);
angular.module('App', ['ui.mask', 'templates', 'app.providers', 'app.tools', 'app.services', 'app.resources', 'app.controllers', 'app.directives'])

现在，当我使用此指令时，我会得到未知的eProvider<-e问题

错误：[$injector:unp]http://errors.angularjs.org/1.4.8/$injector/unp？p0=r供应商%20%3C-%20r

我是这样使用的：

<img class="prize-directive-image" ng-src="{{prize.image}}" domain-img/>

如果我删除域img标记，问题就会消失。此外，如果我只是不丑化代码，问题也会消失。

gulp.task('default', function () {
    // Concat all JS files into a single one called app.min.js
    gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
        .pipe(concat('app.min.js'))
        // .pipe(uglify()) // Without this line the problem doesn't happen
        .pipe(gulp.dest('dist/'));
    // Concat all HTML directives into a single one
    gulp.src('public_html/js/**/**/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(templateCache('templates.min.js', {standalone: true}))
        .pipe(gulp.dest('dist/'));
})

我希望我能深入了解这个具体指令中我可能出错的地方。

提前谢谢。

您错过了为指令的控制器执行类似DI的内联数组注释。

代码

controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
      $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]`

您需要更改指令的controller语法，如下所示：

controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
    }]

看看这个，了解更多细节。

或者，您可以将它保留为现在的样子，并使用GulpJS为您做注释。在我的项目SkeletonSPA中，我也做同样的事情。

我使用GulpJS插件gulp-annotation为我做这件事。你的gulp任务看起来像：

// require gulp-ng-annotate plugin
let ngannotate = require('gulp-ng-annotate');
// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
  .pipe(ngannotate({gulpWarnings: false})) // annotate angular DI
  .pipe(concat('app.min.js'))
  .pipe(uglify()) // do the minification
  .pipe(gulp.dest('dist/'));

这样你就不必自己做，你的Gulp任务也会为你做；-）

相关文章：