The Issue
I am using Bazel to build my Angular application.
Everything works fine with NgRx version 9.
But after upgrading NgRx to v10 or greater, the Angular development server breaks with this error:
Uncaught SyntaxError: Cannot use import statement outside a module
at ts_scripts.js?v=32020367:12007
Minimal Reproduction
To reproduce this issue follow these steps:
git clone https://github.com/flolu/bazel-concatjs-ngrx-issue
cd bazel-concatjs-ngrx-issue
yarn install
yarn start
(Open http://localhost:4200, works fine)yarn upgrade-ngrx
(Upgrade NgRx to v11)yarn start
(Open http://localhost:4200, error in the browser console)
Note, that the production server yarn prod
works fine on both versions of NgRx.
Therefore, this is a problem with the development server (in this case: @bazel/concatjs)
This issue is caused by the
ngfactory.js
files included with NgRx, however I'm unclear if these files should be part of the library distribution or not. It seems perhaps in older versions of Angular they were?In rules_nodejs, the BUILD file generation for node_modules includes these
ngfactory
files in thesrcs
attribute of the generatedjs_library
. (I think that's incorrect now, so we can fix that), these sources includeimport
statements which aren't allowed outside of the modules (as the error states) as we are loading UMD.A workaround around here is to either:
js_library
ngfactory.js
files from NgRx which runs before BUILD file generation. Example below://:package.json
postinstall.js
To have this run after via after the yarn install via bazel:
//:BUILD.bazel
//:WORKSPACE
Applying this to your repro produces the "Hello world" as expected with the updated NgRx deps.