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

Posted 2023-03-13

【中文标题】如何在基于 angular-cli 的混合应用程序中使用 ng-annotate

【英文标题】：How to use ng-annotate with hybrid app based on angular-cli

【发布时间】：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 文件的加载器存在一些冲突，但我不知道如何解决。

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

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