当uullified与gulp一起使用时,Angular-ui-router会中断

Question

我有以下简单的angular.js应用程序,遵循此处概述的最佳实践.

angular
  .module('myApp', ['ui.router']);

(function() {
    function routes($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/404");

        $stateProvider
            .state('createCluster', {
                url: '/create-cluster',
                templateUrl: 'templates/create-cluster.html'
            })
    }

    angular
        .module('myApp')
        .config(routes);
})();

我正在使用gulp来连接所有JavaScript文件,包括angular-ui-router.js并在uglify之后运行所有内容.当我丑化的时候,我得到了:

未捕获错误:[$ injector:modulerr]由于以下原因无法实例化myApp模块:
错误:[$ injector:unpr]未知提供者:e

当我删除uglification时,一切正常.如何让uglification不破坏ui-router？

这是我的gulp任务:

gulp.task('uglify-js', function () {
  gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js'])
    .pipe(concat('app'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(rename({ extname: ".min.js" }))
    .pipe(gulp.dest('client/js'))'
});

Answer 1

在不更改所有代码的情况下使其工作的一个简单方法是将mangle选项设置uglify为false,如下所示:

gulp.task('uglify-js', function() {
  gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js'])
    .pipe(concat('app'))
    .pipe(ngAnnotate())
    .pipe(uglify({ mangle: false }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('client/js'));
});

保留名称,这样你就不会有注射问题.

Answer 2

查看正在生成的代码。缩小 AngularJS 时的一个问题是依赖注入是基于参数名称的，因此在缩小时会中断。

例如，这一行

function routes($stateProvider, $urlRouterProvider) {

可能最终看起来像

function routes(a, b) {

然后 Angular 将不知道要注入哪个依赖项，并且您将收到错误Unknown provider。

要解决这个问题，您可以使用数组语法（请参阅：内联数组注释）。

['$dependencyA', '$dependencyB', function($dependencyA, $dependencyB)

因为缩小后看起来像

['$dependencyA', '$dependencyB', function(a, b)

然后 Angular 就知道要做什么。

在你的情况下，它会是这样的

.config(['$stateProvider', '$urlRouterProvider', routes]);