Я использовал это пример приложения из репозитория rules_nodejs в качестве шаблона для приложения Angular, которое можно построить / обслуживать с помощью Bazel .
Запуск ts_devserver ( BUILD file ) работает совершенно нормально. Но обработка history_server ( BUILD file ) имеет проблему. Запускается:
INFO: Build completed successfully, 1 total action
history-server serving all apps in /home/flolu/.cache/bazel/_bazel_flolu/2d92189468588702b7bac6d93cc5343a/execroot/cents_ideas/bazel-out/k8-fastbuild/bin/services/client/src/prodapp
/_prodapp/src/example => ../../prodapp/_prodapp/src/example
/ => ../../prodapp
history-server listening on port 8080; Ctrl+C to stop
Выпуск
Но когда я открываю http://localhost: 8080 У меня появляется пустая страница, и в консоли возникает ошибка:
Uncaught SyntaxError: Unexpected token '<'
Я относительно уверен, что ошибка должна быть в какой-то неправильной конфигурации в этом файле BUILD (потому что Служба prodapp работает нормально в примере приложения из rules_ nodejs):
load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
load("@io_bazel_rules_docker//container:container.bzl", "container_image")
load("@io_bazel_rules_docker//nodejs:image.bzl", "nodejs_image")
load("@npm//@babel/cli:index.bzl", "babel")
load("@npm//history-server:index.bzl", "history_server")
load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
load("@npm_bazel_terser//:index.bzl", "terser_minified")
load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
package(default_visibility = ["//:__subpackages__"])
exports_files([
"tsconfig.json",
"tsconfig.spec.json",
])
ts_library(
name = "initialize_testbed",
testonly = 1,
srcs = [
"initialize_testbed.ts",
],
deps = [
"@npm//@angular/core",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types",
],
)
ng_module(
name = "src",
srcs = [
"main.dev.ts",
"main.prod.ts",
],
tsconfig = "//services/client:tsconfig.json",
deps = [
"//services/client/src/app",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/router",
#"@npm//@ngrx/store",
],
)
filegroup(
name = "rxjs_umd_modules",
srcs = [
":rxjs_shims.js",
"@npm//:node_modules/rxjs/bundles/rxjs.umd.js",
],
)
_ASSETS = [
":styles.css",
"@npm//:node_modules/zone.js/dist/zone.min.js",
]
html_insert_assets(
name = "inject_scripts_for_dev",
outs = ["index.html"],
args = [
"--html=$(execpath //services/client/src:example/index.html)",
"--out=$@",
"--roots=. $(RULEDIR)",
"--assets",
] + ["$(execpath %s)" % s for s in _ASSETS] + [
"./_/ts_scripts.js",
],
data = ["//services/client/src:example/index.html"] + _ASSETS,
)
ts_devserver(
name = "devserver",
additional_root_paths = ["src/example"],
entry_module = "cents_ideas/services/client/src/main.dev",
scripts = [
"@npm//:node_modules/tslib/tslib.js",
":rxjs_umd_modules",
"@npm//date-fns:date-fns.umd.js",
],
static_files = _ASSETS + [
":inject_scripts_for_dev",
"//services/client/src/assets",
],
deps = ["//services/client/src"],
)
rollup_bundle(
name = "bundle-es2015",
config_file = "rollup.config.js",
entry_points = {
":main.prod.ts": "index",
},
output_dir = True,
deps = [
"//services/client/src",
"@npm//rollup-plugin-commonjs",
"@npm//rollup-plugin-node-resolve",
],
)
babel(
name = "bundle-es5",
args = [
"$(execpath :bundle-es2015)",
"--no-babelrc",
"--source-maps",
"--presets=@babel/preset-env",
"--out-dir",
"$(@D)",
],
data = [
":bundle-es2015",
"@npm//@babel/preset-env",
],
output_dir = True,
)
terser_minified(
name = "bundle-es2015.min",
src = ":bundle-es2015",
)
terser_minified(
name = "bundle-es5.min",
src = ":bundle-es5",
)
html_insert_assets(
name = "inject_scripts_for_prod",
outs = ["_prodapp/src/example/index.html"],
args = [
"--html=$(execpath //services/client/src:example/index.prod.html)",
"--out=$@",
"--roots=. $(RULEDIR)",
"--assets",
] + ["$(execpath %s)" % s for s in _ASSETS],
data = ["//services/client/src:example/index.prod.html"] + _ASSETS,
)
pkg_web(
name = "prodapp",
srcs = _ASSETS + [
":bundle-es2015.min",
":bundle-es5.min",
":inject_scripts_for_prod",
"//services/client/src/assets",
"@npm//:node_modules/systemjs/dist/system.js",
"@npm//:node_modules/core-js/client/core.min.js",
"index.html",
],
additional_root_paths = [
"npm/node_modules/core-js/client",
"npm/node_modules/systemjs/dist",
],
)
history_server(
name = "prodserver",
data = [":prodapp"],
templated_args = [
"-a",
"$(rlocation cents_ideas/services/client/src/prodapp)",
],
)
nodejs_image(
name = "nodejs_image",
data = [":prodapp"],
entry_point = "@npm//:node_modules/history-server/modules/cli.js",
node_modules = "@npm//:node_modules",
tags = ["local"],
templated_args = ["services/client/src/prodapp"],
)
container_image(
name = "image",
base = ":nodejs_image",
tags = ["local"],
workdir = "/app/src/nodejs_image.binary.runfiles/cents_ideas/services/client",
)
Дополнительная информация
Вот дерево файлов внутри контейнера docker в prodapp (внутри /app/services/client/src/nodejs_image.binary.runfiles/cents_ideas)
|-services
| |-client
| | |-src
| | | |-prodapp
| | | | |-npm
| | | | | |-node_modules
| | | | | | |-zone.js
| | | | | | | |-dist
| | | | |-_prodapp
| | | | | |-src
| | | | | | |-example
| | | | |-bundle-es2015.min
| | | | |-bundle-es5.min
Воспроизвести ошибку
Вы можете воспроизвести ошибку, выполнив следующие действия:
- клонировать этот репозиторий: https://github.com/flolu/cents-ideas/tree/473381537a30d71e9d76d7a37c555908ab8db970
- установить npm зависимости, запустив
yarn или npm install - запустить prod-сервер через
yarn client:serve-prod - открыть браузер на http://localhost: 8080