时间戳

首页 > 解决方案 > 如何为使用 Jest 的 NgRx 项目配置 Bazel？

angular - 如何为使用 Jest 的 NgRx 项目配置 Bazel？

问题描述

我有一个使用 NgRx 和 Jest 的现有 Angular 项目。我想将项目转换为使用 Angular CLI 的新选择加入 Bazel 预览 ( https://next.angular.io/guide/bazel )。不幸的是，运行生成的配置ng add @angular/bazel无法正确构建我的项目。

这是一个使用 Angular Material、NgRx 和 Jest 的 Angular 8 项目。它是使用 nrwl/nx Angular CLI 帮助程序生成的，因此文件夹结构与标准 Angular 项目略有不同。我还根据这些说明选择了常春藤：https ://angular.io/guide/ivy

我在这里仔细阅读了示例 angular + bazel 项目：https ://github.com/angular/angular-bazel-example 但是，该项目与我的不同之处在于它使用 Karma + Jasmine，而不是 Jest。（我不知道这种差异是否与我的问题有关。）

运行后yarn ng add @angular/bazel，我还跑来yarn add parse5修复这里的评论之一描述的错误：https ://github.com/lukasgeiter/gettext-extractor/issues/17

由于 nrwl/nx 文件夹结构，自动 bazel 配置对我不起作用（它希望您的 src 文件夹位于工作区的根目录，但我的位于 apps/angularchatclient/ 下）。"targetLabel": "//src:prodapp",通过更改"targetLabel": "//apps/angularchatclient/src:prodapp",angular.json 文件的多个位置，我取得了一些进展。我还使用了该--leaveBazelFilesOnDisk选项，ng build以便可以将 BUILD.bazel 文件移动到其正确的目录并将我的应用程序的依赖项添加到其中。

现在，当我运行时yarn build，我收到以下错误：

yarn run v1.16.0
$ ng build
INFO: Analyzed target //apps/angularchatclient/src:prodapp (1 packages loaded, 1 target configured).
INFO: Found 1 target...
ERROR: /home/user/devbox/angularchatclient/apps/angularchatclient/src/BUILD.bazel:24:1: Compiling Angular templates (ngc) //apps/angularchatclient/src:sr
c failed (Exit 1)
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'NxModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'StoreModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'EffectsModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'StoreDevtoolsModule' was called.
: Unexpected value 'undefined' imported by the module 'AppModule in /home/user/.cache/bazel/_bazel_user/730bcc0be51d4201a9cf443607d64bce/execroot/project/apps/angularchatclient/src/app/app.module.ts'
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'NxModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'StoreModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'EffectsModule' was called.
Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'StoreDevtoolsModule' was called.

Target //apps/angularchatclient/src:prodapp failed to build
Use --verbose_failures to see the command lines of failed build steps.

我已经阅读了这个相关的 GitHub 问题，但是更改我的 tsconfig 规则或为 forRoot() 调用声明 const 变量的建议没有帮助。此外，这个问题与我错过了什么有关？

谢谢！

标签： angularjestjsngrxbazel

解决方案

Jest 应该可以工作，但我在使用 Angular 8 和 Bazel 时遇到了同样的错误。尝试更新你angular-metadata.tsconfig.json的样子：

// WORKAROUND https://github.com/angular/angular/issues/18810
//
// This file is required to run ngc on 3rd party libraries such as @ngrx,
// to write files like node_modules/@ngrx/store/store.ngsummary.json.
//
{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015"
        ],
        "experimentalDecorators": true,
        "types": [],
        "module": "amd",
        "moduleResolution": "node"
    },
    "angularCompilerOptions": {
        "enableSummariesForJit": true
    },
    "include": [
        "node_modules/@angular/**/*",
        "node_modules/@ngrx/**/*"
    ],
    "exclude": [
        "node_modules/@ngrx/store/migrations/**",
        "node_modules/@ngrx/store/schematics/**",
        "node_modules/@ngrx/store/schematics-core/**",
        "node_modules/@angular/cdk/schematics/**",
        "node_modules/@angular/cdk/typings/schematics/**",
        "node_modules/@angular/material/schematics/**",
        "node_modules/@angular/material/typings/schematics/**",
        "node_modules/@angular/common/upgrade*",
        "node_modules/@angular/router/upgrade*",
        "node_modules/@angular/bazel/**",
        "node_modules/@angular/compiler-cli/**",
        "node_modules/@angular/**/testing/**"

    ]
}

我认为这里的关键是导入 ngrx 模块和enableSummariesForJit.

推荐阅读