如何在基于 angular-cli 的混合应用程序中使用 ng-annotate

Question

我正在开发一个使用 TypeScript 编写的 Angular.js 项目。我们正在尝试评估是否升级到 Angular 8，但我们一直在思考如何将 ng-annotate 与 angular-cli 的 webpack 配置一起使用。

我相信这可以通过使用@angular-builders/custom-webpack 工具或使用 ngx-build-plus 工具来实现，但我都没有成功。

我目前的尝试包括 ngx-build-plus 的部分 webpack 文件，配置如下：

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: ['ng-annotate-loader?ngAnnotate=ng-annotate-patched'],
      },
      {
        test: /\.tpl\.html$/,
        loader: 'ng-cache-loader?-url&module=templates&prefix=src:./**/'
      }
    ]
  },
};

有了这个，当我运行 ng serve --extra-webpack-config webpack.partial.js -o 我得到以下错误： NonErrorEmittedError: (Emitted value instead of an instance of Error) error: couldn't process source due to parse error,Unexpected token

它所引用的令牌只是方法参数的类型声明。所以我猜测 angular-cli 已经用于 TypeScript 文件的加载程序存在一些冲突，但我不知道如何解决这个问题。

是否有关于如何使用这两种工具之一或其他工具解决此问题的任何意见？

Answer 1

因此，方法是使用 webpack-merge and custom-webpack。

这是运行使用 Typescript 文件进行 ng-annotate 的配置：



module.exports = (config, options) => {
  const customConfig = {
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: ['ng-annotate-loader?ngAnnotate=ng-annotate-patched'],
        },
        {
          test: /\.tpl\.html$/,
          loader: 'ng-cache-loader?-url&module=templates&prefix=src:./**/'
        }
      ]
    }
  };

    return merge.strategy({
      'module.rules': 'prepend'
    })(config, customConfig)
  };

关键部分是 merge.strategy 调用，它将确保自定义配置的加载程序将添加到 angular-cli 已经设置的加载程序之前。

Answer 2

在研究了几个小时的替代方案后，最适合我的解决方案是使用 babel-plugin-angularjs-annotate by:

创建新项目
正在安装 babel 和 babel-plugin-angularjs-annotate
正在执行 babel，它从 src 获取文件，添加注释，并将结果放入文件夹 output.

对于其他需要完整解决方案的人，这是我执行的：

mkdir babel-project && cd babel-project
npm init -y
npm install -D babel-cli babel-plugin-angularjs-annotate
创建 .babelrc 并添加：

{
  "presets": [],
  "plugins": [ "angularjs-annotate" ]
}

最后执行babel： npx babel src -d build --extensions .ts

这需要这样的文件：

import * as _ from "underscore";
import "@app2/hello/chao"

const greeting = () => "Hello World"

angular.module("MyMod")
    .controller("MyCtrl", ($scope, HelloClient) => {
        HelloClient.add($scope, greeting);
    });

并将它们变成：

import * as _ from "underscore";
import "@app2/hello/chao";

const greeting = () => "Hello World";

angular.module("MyMod").controller("MyCtrl", ["$scope", "HelloClient", ($scope, HelloClient) => {
    HelloClient.add($scope, greeting);
}]);

更新

使用 babel-plugin-angularjs-annotate 我的格式很乱，所以我最终只复制和粘贴了 Babel 输出的相关部分，这花了几个小时。

如何在基于 angular-cli 的混合应用程序中使用 ng-annotate

How to use ng-annotate with hybrid app based on angular-cli

angularjs

typescript

webpack

angular-cli

angular

更新