How do I configure Bazel for an NgRx project that uses Jest?

Question

I have an existing Angular project that uses NgRx and Jest. I would like to transition the project to use the new opt-in Bazel preview for Angular CLI (https://next.angular.io/guide/bazel). Unfortunately, the configuration generated by running ng add @angular/bazel does not build my project correctly.

This is an Angular 8 project using Angular Material, NgRx, and Jest. It was generated using the nrwl/nx Angular CLI helpers, so the folder structure is slightly different than a standard Angular project. I have also opted into Ivy according to these instructions: https://angular.io/guide/ivy

I have perused the example angular + bazel project here: https://github.com/angular/angular-bazel-example However, that project differs from mine in that it uses Karma + Jasmine, not Jest. (I don't know if this difference is related to my problem or not.)

After running yarn ng add @angular/bazel, I also ran yarn add parse5 to fix the error that one of the comments here describes: https://github.com/lukasgeiter/gettext-extractor/issues/17

Because of the nrwl/nx folder structure, the automatic bazel configuration doesn't work for me (it expects your src folder to be at the root of your workspace, but mine is under apps/angularchatclient/). I've made some progress by changing "targetLabel": "//src:prodapp", to "targetLabel": "//apps/angularchatclient/src:prodapp", in several locations of my angular.json file. I also used the --leaveBazelFilesOnDisk option with ng build so that I could move the BUILD.bazel file to its correct directory and add my app's dependencies to it.

Now, when I run yarn build, I get the following error:

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.

I have read through this related GitHub issue, but the suggestions to change my tsconfig rules or declare const variables for the forRoot() calls haven't helped. Additionally, this question is related What am I missing?

Thanks!

Boomer Rogers Boomer Rogers · Accepted Answer · 2019-08-12T20:47:43

Jest should be working but I was getting the same error for ngrx with Angular 8 and Bazel. Try updating your angular-metadata.tsconfig.json to look like:

// 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/**"

    ]
}

I think the key here is to import the ngrx modules and the enableSummariesForJit.

How do I configure Bazel for an NgRx project that uses Jest?

1 Answers