Bazel + Angular产品服务器不起作用（“未捕获的SyntaxError：意外的令牌'<'”）

时间：2020-03-20 18:34:37

标签： node.js angular typescript docker bazel

我已经使用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 '<'

console error

我相对确定错误必须是在this BUILD file中以某种错误的配置进行配置的（因为在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",
)

其他信息

这是来自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

重现错误

您可以按照以下步骤重现该错误：

  1. 克隆此存储库：https://github.com/flolu/cents-ideas/tree/473381537a30d71e9d76d7a37c555908ab8db970
  2. 通过运行yarn或npm install来安装npm依赖项
  3. 通过yarn client:serve-prod
    4. 运行产品服务器
  4. 在http://localhost:8080上打开浏览器

1 个答案:

答案 0 :(得分：0)

这是有效的BUILD文件。向Ray发出this拉取请求即可获得赠送金额。 

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 = [
    "@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:_index.html)",
        "--out=$@",
        "--roots=. $(RULEDIR)",
        "--assets",
    ] + ["$(execpath %s)" % s for s in _ASSETS] + [
        "./_/ts_scripts.js",
    ],
    data = [":_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",
        ":styles.css",
        "//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",
)

_PROD_ASSETS = [
    "@npm//:node_modules/systemjs/dist/system.js",
    "@npm//:node_modules/core-js/client/core.min.js",
]

_BUNDLE_ASSETS = [
    "//services/client/src:bundle-es2015.min",
    "//services/client/src:bundle-es5.min",
]

html_insert_assets(
    name = "inject_scripts_for_prod",
    outs = ["_prodapp/services/client/src/index.html"],
    args = [
        "--html=$(execpath //services/client/src:_index.html)",
        "--out=$@",
        "--roots=. $(RULEDIR) npm/node_modules/core-js/client npm/node_modules/systemjs/dist",
        "--assets",
    ] + ["$(execpath %s)" % s for s in _ASSETS + _PROD_ASSETS]
      + ["$(execpath %s)/index.js" % s for s in _BUNDLE_ASSETS],
    data = [":_index.html"] + _ASSETS + _PROD_ASSETS + _BUNDLE_ASSETS,
)

pkg_web(
    name = "prodapp",
    srcs = _ASSETS + _PROD_ASSETS + _BUNDLE_ASSETS + [
        ":inject_scripts_for_prod",
        "styles.css",
        "//services/client/src/assets",
    ],
    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",
)
相关问题
最新问题