angularjs - Webpack、Angular 和 ng-annotate-loader — 注释 Angular 文件时遇到问题

Question

我正在尝试使用 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: ['ng-annotate', 'babel?stage=1'] ，没有改善。你能建议我如何解决它吗？

编辑:最终发现我的问题基本上是 Angular ng annotate does not work with babel的重复

EDIT2:有人向我指出，ng-annotate 未能注释 angular 模块的 .config，因为我将 angular 作为 es6 模块导入，而不是将其声明为变量，这显然使 ng-annotate 感到困惑。

Answer 1

好的，我最终在 ng-annotate’s Readme 中找到了是一个字符串'ngInject';放在函数里面时可以显示ng-annotate注释哪个函数。

我用我的设置试过了，它奏效了。

但是以不需要在函数内部使用此类无关标记字符串的方式设置 ng-annotate-loader 会很棒。

P.S.:我的问题的 Edit2 部分包含最终答案——在我的例子中，ng-annotate 的静态分析器不满意，因为 angular被作为 ES6 模块导入，而不是使用 require 声明为变量句法。