【问题标题】：How to use ng-annotate with hybrid app based on angular-cli如何在基于 angular-cli 的混合应用程序中使用 ng-annotate
【发布时间】：2020-04-05 16:56:57
【问题描述】：

我正在开发一个使用 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 文件的加载器存在一些冲突，但我不知道如何解决。

对于如何使用这两种工具中的一种或其他工具来解决这个问题，是否有任何意见？

【问题讨论】：

标签： angularjs angular typescript webpack angular-cli

【解决方案1】：

因此，执行此操作的方法是使用 webpack-merge 和 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 已经设置的加载器之前。

【讨论】：

非常感谢！经过 4 小时的调试，我终于找到了你的答案，拯救了我的一天！
这是否需要弹出 ng-cli 配置？
@Daniel 不，它没有。是为 ng-cli 使用自定义 webpack 版本

【解决方案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 输出的相关部分，这花了几个小时。

【讨论】：