不能在模块外使用 import 语句 (Bazel + Concatjs + NgRx)

Question

问题

我正在使用 Bazel 构建我的 Angular 应用程序。

NgRx 版本 9 一切正常。

但是在将 NgRx 升级到 v10 或更高版本后，Angular 开发服务器因以下错误而中断：

Uncaught SyntaxError: Cannot use import statement outside a module
    at ts_scripts.js?v=32020367:12007

最小Repro减少

要重现此问题，请执行以下步骤：

git clone https://github.com/flolu/bazel-concatjs-ngrx-issue
cd bazel-concatjs-ngrx-issue
yarn install
yarn start（打开http://localhost:4200，正常）
yarn upgrade-ngrx（将 NgRx 升级到 v11）
yarn start（打开http://localhost:4200，浏览器控制台报错）

请注意，生产服务器 yarn prod 在两个版本的 NgRx 上都能正常工作。

因此，这是开发服务器的问题（在本例中：@bazel/concatjs）

Answer 1

这个问题是由 NgRx 中包含的 ngfactory.js 文件引起的，但是我不清楚这些文件是否应该是库分发的一部分。似乎在 Angular 的旧版本中它们是？

在 rules_nodejs 中，node_modules 的 BUILD 文件生成将这些 ngfactory 文件包含在生成的 js_library 的 srcs 属性中。（我认为现在不正确，所以我们可以解决这个问题），这些来源包括 import 不允许在模块外部（如错误状态）的语句，因为我们正在加载 UMD。

这里的解决方法是：

Patch rules_nodejs 不将这些文件添加到生成的 js_library
添加一个安装后脚本以从 NgRx 中删除 ngfactory.js 个文件，这些文件在 BUILD 文件生成之前运行s。示例如下：

//:package.json

diff --git a/package.json b/package.json
index 137c115..b322b55 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "@angular/platform-browser": "^11.2.4",
     "@angular/platform-browser-dynamic": "^11.2.4",
     "@angular/router": "^11.2.4",
-    "@ngrx/store": "9.1.2",
+    "@ngrx/store": "^11.0.1",
     "core-js": "2.6.9",
     "rxjs": "^6.6.3",
     "systemjs": "6.1.2",
@@ -29,7 +29,7 @@
     "@bazel/rollup": "^3.2.0",
     "@bazel/terser": "^3.2.0",
     "@bazel/typescript": "^3.2.0",
-    "@ngrx/store-devtools": "9.1.2",
+    "@ngrx/store-devtools": "^11.0.1",
     "@types/jasmine": "^3.6.2",
     "@types/node": "^14.11.2",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
@@ -53,6 +53,7 @@
     "rollup": "^2.28.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "shelljs": "^0.8.4",
     "terser": "^5.3.4",
     "typescript": "^4.2.3"
   },
@@ -60,7 +61,7 @@
     "start": "ibazel run //services/client:dev_server",
     "prod": "bazelisk run //services/client:app_server",
     "upgrade-ngrx": "yarn add @ngrx/store -D @ngrx/store-devtools",
-    "postinstall": "patch-package && ngcc"
+    "postinstall": "node postinstall.js && patch-package && ngcc"

postinstall.js

require('shelljs').rm(['node_modules/@ngrx/**/*.ngfactory.js', 'node_modules/@ngrx/**/*.ngsummary.json']);

要在通过 bazel 安装 yarn 之后运行：

//:BUILD.bazel

diff --git a/BUILD.bazel b/BUILD.bazel
index b91e927..d7a8767 100644
--- a/BUILD.bazel
+++ b/BUILD.bazel
@@ -2,6 +2,8 @@ load("@npm//@bazel/typescript:index.bzl", "ts_config")

 package(default_visibility = ["//:__subpackages__"])

+exports_files(["postinstall.js"])
+
 ts_config(
     name = "tsconfig",
     src = "tsconfig.json",

//:WORKSPACE

diff --git a/WORKSPACE b/WORKSPACE
index 7fabecb..cd0e095 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -18,6 +18,9 @@ yarn_install(
     package_json = "//:package.json",
     quiet = False,
     yarn_lock = "//:yarn.lock",
+    data = [
+        "//:postinstall.js",
+    ],
 )

 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")

将此应用于您的重现会生成预期的“Hello world”以及更新的 NgRx deps。

不能在模块外使用 import 语句 (Bazel + Concatjs + NgRx)

Cannot use import statement outside a module (Bazel + Concatjs + NgRx)

bazel

ngrx

angular

bazel-rules-nodejs

问题

最小Repro减少