Невозможно использовать оператор импорта вне модуля (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. (Откройте http: // localhost:4200, отлично работает)
5. yarn upgrade-ngrx (Обновите NgRx до v11)
6. yarn start (Открываем http: // localhost:4200, ошибка в консоли браузера)

Обратите внимание, что производственный сервер yarn prod отлично работает на обеих версиях NgRx.

Следовательно, это проблема с сервером разработки (в данном случае: @bazel / concatjs)

Answer 1

Эта проблема вызвана файлами, включенными в NgRx, однако мне неясно, должны ли эти файлы быть частью дистрибутива библиотеки или нет. Кажется, возможно, в старых версиях Angular они были?

В rules_nodejs генерация файла BUILD для node_modules включает в себя эти ngfactoryфайлы в srcsатрибут созданного . (я думаю , что сейчас это неверно, поэтому мы можем это исправить), эти источники включают importоператоры, которые не разрешены за пределами модулей (как указано в ошибке), когда мы загружаем UMD.

Обходной путь здесь заключается в следующем:

• Патч rules_nodejs , чтобы не добавлять эти файлы в сгенерированный js_library
• Добавьте постустановочный скрипт для удаления ngfactory.jsфайлы из NgRx, который запускается перед созданием файла BUILD. Пример ниже:

//: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']);

Чтобы это запускалось после via после установки пряжи через 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.