如何在基于angular-cli的混合应用程序中使用ng-annotate [英] How to use ng-annotate with hybrid app based on angular-cli

问题描述

我正在研究用TypeScript编写的Angular.js项目.我们正在尝试评估是否升级到Angular 8，并且一直困扰于如何在Angular-cli的webpack配置中使用ng-annotate.

I'm working on an Angular.js project written with TypeScript. We're trying to evaluate whether to upgrade to Angular 8 and we're stuck with how to use ng-annotate with angular-cli's webpack configuration.

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

I believe that this can be achieved either by using the @angular-builders/custom-webpack tool or by using ngx-build-plus tool but I had not succeeded with neither of them.

我当前的尝试包括ngx-build-plus的部分Webpack文件，其配置如下:

My current attempt includes a partial webpack file for ngx-build-plus with the following configuration :

  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:(使用值代替实例)错误)错误:由于解析错误，意外令牌而无法处理源

Having this, when I run ng serve --extra-webpack-config webpack.partial.js -o I get the following error : NonErrorEmittedError: (Emitted value instead of an instance of Error) error: couldn't process source due to parse error,Unexpected token

它引用的标记只是方法参数的类型声明.因此，我猜想与angular-cli已经用于TypeScript文件的加载程序存在一些冲突，但是我不知道如何解决这个问题.

The token to which it refers, is simply the type declaration for a method parameter. So I'm guessing that there is some conflict with the loader that angular-cli already uses for TypeScript files but I don't know how to resolve this.

是否有使用两种工具之一或其他方法解决此问题的意见?

Is there any input on how to solve this either using one of the two tools or something else?

推荐答案

因此，执行此操作的方法是使用 webpack合并和 custom-webpack .

So, the way to do this is by using webpack-merge and custom-webpack.

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

This is the configuration to run ng-annotate with Typescript files :

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已经设置的加载程序之前.

The key part is the merge.strategy call which will make sure that the loaders of the custom configuration will be prepended to the ones that angular-cli already sets up.

这篇关于如何在基于angular-cli的混合应用程序中使用ng-annotate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！