不能在模块外使用 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

最小复制

要重现此问题，请按照下列步骤操作：

1. git clone https://github.com/flolu/bazel-concatjs-ngrx-issue
2. cd bazel-concatjs-ngrx-issue
3. yarn install
4. yarn start （打开 http://localhost:4200，工作正常）
5. yarn upgrade-ngrx （将 NgRx 升级到 v11）
6. 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属性中。 （我认为现在这是不正确的，所以我们可以修复它），这些来源包括在我们加载 UMD 时不允许在模块之外的import语句（如错误状态）。

这里的解决方法是：

• 修补 rules_nodejs以不将这些文件添加到生成的js_library
• 添加一个安装后脚本以从 NgRx 中删除ngfactory.js文件，该文件在生成文件之前运行。 下面的例子：

//: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 安装纱线后通过以下方式运行：

//: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 所期望的那样。