【发布时间】：2020-03-20 18:34:37
【问题描述】：
我使用来自 rules_nodejs 存储库的 this 示例应用程序作为 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 '<'
我相对确定错误必须是在this BUILD file 中的某些错误配置中（因为在来自 rules_nodejs 的示例应用程序中提供 prodapp 工作正常）：
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",
)
附加信息
这是来自 prodapp 的 docker 容器内的文件树（在 /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
- 通过运行
yarn或npm install安装npm 依赖项 - 通过
yarn client:serve-prod运行产品服务器 - 打开浏览器http://localhost:8080
【问题讨论】：
标签： node.js angular typescript docker bazel