Webpack,angular和ng-annotate-loader - 带有注释角文件的麻烦

aza*_*gru 4 angularjs webpack ng-annotate

我试图使用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>'
                }
            }
        });
}]);
Run Code Online (Sandbox Code Playgroud)

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

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

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

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'ng-annotate!babel?stage=1'
        },
Run Code Online (Sandbox Code Playgroud)

但这并不能解决[$injector:modulerr]错误.试图改变loader: 'ng-annotate!babel?stage=1'线loaders: ['ng-annotate', 'babel?stage=1'],没有改善.你能建议我怎么解决它吗?

编辑:最终发现我的问题基本上是一个重复的Angular ng annotate不适用于babel

EDIT2:有人向我指出ng-annotate无法注释角度模块的.config,因为我将angular作为es6模块导入而不是将其声明为变量,这显然混淆了ng-annotate.

aza*_*gru 5

好吧,我最终在ng-annotate的自述文件中发现是,'ngInject';放在函数内部时的字符串可以显示ng-annotate要注释的函数.

我尝试使用我的设置,它工作正常.

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

PS:我的问题的Edit2部分包含最终答案 - 在我的情况下,ng-annotate的静态分析器不满意,因为angular导入为ES6模块而不是使用require语法声明为变量.