[英]Cannot use import statement outside a module (Bazel + Concatjs + NgRx)
I am using Bazel to build my Angular application.我正在使用Bazel构建我的 Angular 应用程序。
Everything works fine with NgRx version 9. NgRx版本 9 一切正常。
But after upgrading NgRx to v10 or greater, the Angular development server breaks with this error:但是将 NgRx 升级到 v10 或更高版本后,Angular 开发服务器中断并出现此错误:
Uncaught SyntaxError: Cannot use import statement outside a module
at ts_scripts.js?v=32020367:12007
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 start
(打开 http://localhost:4200,工作正常)yarn upgrade-ngrx
(Upgrade NgRx to v11) yarn upgrade-ngrx
(将 NgRx 升级到 v11)yarn start
(Open http://localhost:4200, error in the browser console) yarn start
(打开http://localhost:4200,浏览器控制台报错) Note, that the production server yarn prod
works fine on both versions of NgRx.请注意,生产服务器
yarn prod
在 NgRx 的两个版本上都可以正常工作。
Therefore, this is a problem with the development server (in this case: @bazel/concatjs )因此,这是开发服务器的问题(在这种情况下: @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.这个问题是由 NgRx 中包含的
ngfactory.js
文件引起的,但是我不清楚这些文件是否应该是库分发的一部分。 It seems perhaps in older versions of Angular they were?似乎在旧版本的 Angular 中它们是?
In rules_nodejs, the BUILD file generation for node_modules includes these ngfactory
files in the srcs
attribute of the generated js_library
.在 rules_nodejs 中,node_modules 的 BUILD 文件生成将这些
ngfactory
文件包含在生成的js_library
的srcs
属性中。 (I think that's incorrect now, so we can fix that), these sources include import
statements which aren't allowed outside of the modules (as the error states) as we are loading UMD. (我认为现在这是不正确的,所以我们可以修复它),这些来源包括在我们加载 UMD 时不允许在模块之外的
import
语句(如错误状态)。
A workaround around here is to either:这里的解决方法是:
js_library
js_library
ngfactory.js
files from NgRx which runs before BUILD file generation.ngfactory.js
文件,该文件在生成文件之前运行。 Example below: //: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']);
To have this run after via after the yarn install via bazel:要在通过 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")
Applying this to your repro produces the "Hello world" as expected with the updated NgRx deps.将它应用到您的复制品会产生“Hello world”,正如更新的 NgRx deps 所期望的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.