标签: ng-annotate

使用Babel转换为ES6时出现奇怪的错误,ng-annotate不喜欢解构.我将我的源码复制到在线babel编译器中,它运行正常.ng-annotate在我的gulp管道链中注释掉了错误.删除/* @ngAnnotate */文件中的注释并手动注入也不会改变任何内容.

Gulp部分:

return gulp.src(config.scripts.app)
    .pipe(changed(config.dist + '/scripts'))
    .pipe(plumber())
    .pipe(annotate())

    // Filter out and transpile only .es6.js files
    .pipe(es6)
    .pipe(babel({
        presets: ['es2015'],
        plugins: ['extensible-destructuring'],
        comments: false
    }))
    .pipe(es6.restore)

    .pipe(concat('scripts.js'))
    .pipe(gulp.dest(config.dist + '/scripts'))

有问题的来源:

var [min, max] = values.map(val => +val);
// let/var doesn't make a difference.

ngModelCtrl.$modelValue = [min, max];

错误来自依赖ng-annotate:

Error: StringMap expected string key
    at stringmap.set (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/node_modules/stringmap/stringmap.js:101:19)
    at Scope.add (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scope.js:102:17)
    at /Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scopetools.js:38:25
    at Array.forEach (native)
    .... more

stringmap.js 有问题的功能: …

我在使用Grunt和grunt-ng-annotate时收到此警告.

警告中没有引用错误在文件中的位置,这使调试变得困难.

有任何想法吗？

在尝试让Angular(1.x)使用​​systemjs时,我意识到目前没有能力(我知道)自动插入$inject到角度组件中,即使函数的参数受到损坏,这也会使组件保持工作状态.缩小器.手动创建$inject注释很繁琐,容易出错并且违反了DRY主体.

有一个成熟的npm模块ng-annotate,它可以解决这个问题并在许多类似的情况下用于捆绑.正如我一直在探索SystemJS,我发现有一个插件系统包含翻译源代码的能力,这正是ng-annotate它的作用.

但是,从我所看到的,SystemJS只能让您将特定文件扩展名映射到单个加载器,并且所有插件示例都支持新的文件类型.我想做的是对SystemJS的转换过程的输出进行后处理,而不是添加新的文件类型.似乎SystemJS应该能够做到这一点,因为它有一个处理管道,但我无法弄清楚如何以正确的方式挂钩它.现在我使用Browserify来达到同样的效果,但我最终得到了一组相当复杂的构建任务,如果可能的话我想用SystemJS简化它.

其他策略也可以ng-annotate在SystemJS的加载器管道中使用.

我试图使用Webpack捆绑一个Angular应用程序,并在捆绑缩小后遇到问题.此语法具有依赖项的手动注释,可用于:

var app = angular.module('app', [
    'ui.router'
])
.config(['$locationProvider', '$stateProvider', ($locationProvider, $stateProvider) => {
    $locationProvider.html5Mode(true);
    $stateProvider
        .state('root', {
            url: '/',
            views: {
                '': {
                    template: '<p>Hello!</p>'
                }
            }
        });
}]);

而此语法产生$injector:modulerr错误:

var app = angular.module('app', [
    'ui.router'
])
.config(($locationProvider, $stateProvider) => {
    $locationProvider.html5Mode(true);
    $stateProvider
        .state('root', {
            url: '/',
            views: {
                '': {
                    template: '<p>Hello!</p>'
                }
            }
        });
});

我正在为Webpack使用ng-annotate-loader.以下是配置文件的相关部分:

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'ng-annotate!babel?stage=1'
        },

但这并不能解决[$injector:modulerr]错误.试图改变loader: 'ng-annotate!babel?stage=1'线loaders: …

我想在我的所有项目的角度文件上通过grunt运行ng-annotate.
找不到此选项.

我只通过指定文件名来选择注释.

ngAnnotate: {
        dist: {
            files: {
                'output_file_name.js': ['input_file_name'],
            },
        }
    }

我需要一些更通用的东西,它会在特定目录上递归运行.