javascript - 使用 ng-annotate 失败

Question

我正在尝试使用ng-annotate在我的 Angular 应用程序上，但根本不起作用。

我有配置部分:

(function () {
    'use strict';


    angular.module('app')
        .config(/*@ngInject*/ routes);

    function routes ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'app/main/view.html',
                controller: 'MainCtrl'
            });

        $stateProvider
            .state('signup', {
                url: '/signup',
                templateUrl: 'app/signup/view.html',
                controller: 'SignUpCtrl'
            });

        $urlRouterProvider.otherwise('/');
    }

})();

当我运行 Angular 应用程序时，我收到错误消息:

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:strictdi] routes is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.15/$injector/strictdi?p0=routes

并且 ng-annotate 在我的 gulp 配置文件中实现:

gulp.task('html', ['inject', 'partials'], function () {
    var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
    var partialsInjectOptions = {
      starttag: '<!-- inject:partials -->',
      ignorePath: options.tmp + '/partials',
      addRootSlash: false
    };

    var htmlFilter = $.filter('*.html');
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');
    var assets;

    return gulp.src(options.tmp + '/serve/*.html')
      .pipe($.inject(partialsInjectFile, partialsInjectOptions))
      .pipe(assets = $.useref.assets())
      .pipe($.rev())
      .pipe(jsFilter)
      .pipe($.ngAnnotate())
      .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
      .pipe(jsFilter.restore())
      .pipe(cssFilter)
      .pipe($.csso())
      .pipe(cssFilter.restore())
      .pipe(assets.restore())
      .pipe($.useref())
      .pipe($.revReplace())
      .pipe(htmlFilter)
      .pipe($.minifyHtml({
        empty: true,
        spare: true,
        quotes: true,
        conditionals: true
      }))
      .pipe(htmlFilter.restore())
      .pipe(gulp.dest(options.dist + '/'))
      .pipe($.size({ title: options.dist + '/', showFiles: true }));
  }); 

我做错了什么？

Answer 1

通过 ng-annotate -a example.js 运行您的示例(首先npm install -g ng-annotate)，您将看到路由已正确注释。如果您愿意，您可以跳过它的 /*@ngInject*/ 注释，这不是必需的。

我猜你的问题是你正在执行controller: 'MainCtrl'而不是controller: MainCtrl。如果引用是字符串文字，则 ng-annotate 无法跟踪引用，因此请更改它或确保在 MainCtrl 本身上执行显式 ngInject。