angular - 如何修复浏览器未捕获错误 : Script error for "@ng-bootstrap/ng-bootstrap" ng-boostrap Bazel

Question

我在浏览器中遇到运行时错误:

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.min.js?v=1567992324291:1 Uncaught Error: Script error for "@ng-bootstrap/ng-bootstrap", needed by: @ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory, project/src/app/app.component.ngfactory, project/src/app/app.module.ngfactory, project/src/app/app.module
http://requirejs.org/docs/errors.html#scripterror
    at makeError (bundle.min.js?v=1567992324291:169)
    at HTMLScriptElement.onScriptError (bundle.min.js?v=1567992324291:1739)
    at e.invokeTask (zone.min.js?v=1567992324291:1)
    at t.runTask (zone.min.js?v=1567992324291:1)
    at t.invokeTask [as invoke] (zone.min.js?v=1567992324291:1)
    at _ (zone.min.js?v=1567992324291:1)
    at HTMLScriptElement.m (zone.min.js?v=1567992324291:1)

我试过:

尝试 1 angular-bazel-example fork

fork angular-bazel-example

1. 添加 ng-bootstrap

yarn add @ng-bootstrap/ng-bootstrap

1. 将 ngb 添加到 angular-metadata.tsconfig.json

"node_modules/@ng-bootstrap/**/*"

1. 运行安装后

yarn run postinstall

1. 向 app.component 添加警报

<ngb-alert [dismissible]="false">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>

1. 将 NgbAlertModule 添加到 app.module

import {NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
// ...
imports: [
  //...
  NgbAlertModule,
  //...
]

1. 将 ng-bootstrap 添加到 src/BUILD.bazel

deps: [
  # ...
  "@npm//@ng-bootstrap/ng-bootstrap"
  # ...
]

1. 服务

ng serve

浏览器错误:

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.min.js:19 Uncaught Error: Script error for "@ng-bootstrap/ng-bootstrap", needed by: @ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory, angular_bazel_example/src/app/app.component.ngfactory, angular_bazel_example/src/app/app.module.ngfactory, angular_bazel_example/src/app/app.module
http://requirejs.org/docs/errors.html#scripterror
    at makeError (ts_scripts.js:174)
    at HTMLScriptElement.onScriptError (ts_scripts.js:1744)
    at e.invokeTask (zone.min.js:19)
    at t.runTask (zone.min.js:19)
    at t.invokeTask [as invoke] (zone.min.js:19)
    at _ (zone.min.js:50)
    at HTMLScriptElement.m (zone.min.js:50)
:5432/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)

1. 构建

$ ng build
Your global Angular CLI version (8.2.2) is greater than your local
version (8.1.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
DEBUG: Rule 'io_bazel_rules_k8s' indicated that a canonical reproducible form can be obtained by modifying ar
guments shallow_since = "1563971973 -0400"
DEBUG: Call stack for the definition of repository 'io_bazel_rules_k8s' which is a git_repository (rule defin
ition at /private/var/tmp/_bazel_cryan/ae53ea6e5cfa8e1630282da1d8a7c11d/external/bazel_tools/tools/build_defs/repo/git.bzl:181:18):
 - /Users/cryan/code/t/angular-bazel-example/WORKSPACE:123:1
INFO: Analyzed target //src:prodapp (163 packages loaded, 2122 targets configured).
INFO: Found 1 target...
ERROR: /Users/cryan/code/t/angular-bazel-example/src/BUILD.bazel:122:1: Bundling JavaScript src/bundle_chunks
_es2015 [rollup] failed (Exit 1) rollup failed: error executing command bazel-out/host/bin/external/build_baz
el_rules_nodejs/internal/rollup/rollup --config bazel-out/darwin-fastbuild/bin/src/_bundle.rollup.conf.js --o
utput.dir ... (remaining 3 argument(s) skipped)

Use --sandbox_debug to see verbose messages from the sandbox
[!] (commonjs plugin) Error: Could not resolve import 'angular_bazel_example/external/npm/node_modules/@ng-bo
otstrap/ng-bootstrap/ng-bootstrap.ngfactory' from '/private/var/tmp/_bazel_cryan/ae53ea6e5cfa8e1630282da1d8a7c11d/sandbox/darwin-sandbox/128/execroot/angular_bazel_example/bazel-out/darwin-fastbuild/bin/src/bundle.es6/src/app/app.module.ngfactory.js'
Error: Could not resolve import 'angular_bazel_example/external/npm/node_modules/@ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory' from '/private/var/tmp/_bazel_cryan/ae53ea6e5cfa8e1630282da1d8a7c11d/sandbox/darwin-sandbox/128/execroot/angular_bazel_example/bazel-out/darwin-fastbuild/bin/src/bundle.es6/src/app/app.module.ngfactory.js'
    at Object.notResolved (/private/var/tmp/_bazel_cryan/ae53ea6e5cfa8e1630282da1d8a7c11d/execroot/angular_bazel_example/bazel-out/darwin-fastbuild/bin/src/_bundle.rollup.conf.js:163:11)
    at /private/var/tmp/_bazel_cryan/ae53ea6e5cfa8e1630282da1d8a7c11d/sandbox/darwin-sandbox/128/execroot/angular_bazel_example/bazel-out/host/bin/external/build_bazel_rules_nodejs/internal/rollup/rollup.runfiles/build_bazel_rules_nodejs_rollup_deps/node_modules/rollup-plugin-commonjs/src/utils.js:20:68

Target //src:prodapp failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 275.586s, Critical Path: 54.27s
INFO: 39 processes: 1 darwin-sandbox, 38 worker.
FAILED: Build did NOT complete successfully
/Users/cryan/code/t/angular-bazel-example/node_modules/@bazel/bazel-darwin_x64/bazel-0.28.1-darwin-x86_64 failed with code 1.

1. 差异 https://github.com/angular/angular-bazel-example/compare/master...conalryan:ng-bootstrap?expand=1

尝试 2 ng new ng-bootstrap-bazel

1. 启动新项目

ng new ng-bootstrap-bazel
# select routing and scss for styles

1. 添加 ng-bootstrap

yarn add @ng-bootstrap/ng-bootstrap

将 ng-alert 添加到 app.component.html

<ngb-alert [dismissible]="false">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>

将 NgbModule 添加到 app.module

import {NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
// ...
imports: [
  //...
  NgbAlertModule,
  //...
]

构建并运行

ng build
ng serve

1. 添加巴泽尔

ng add @angular/bazel

将 ng-bootstrap 添加到 angular-metadata.tsconfig.json

"node_modules/@ng-bootstrap/ng-bootstrap/**/*"

将 ng-bootstrap 添加到 BUILD.bazel

"@npm//@ng-bootstrap/ng-bootstrap",

安装后任务:在“包含的”node_modules 上运行 ngc

yarn run postinstall

ngc之后node_module中会有一个.ngfactory.js文件

node_modules/@ng-bootstrap/ng-bootstrap
ng-bootstrap.ngfactory.js

通过 Angular CLI 使用 Bazel 构建

ng build --leaveBazelFilesOnDisk

将 "@npm//@ng-bootstrap/ng-bootstrap", 添加到//src:bundle deps

"@npm//@ng-bootstrap/ng-bootstrap",

bazel run //src:deverserver

浏览器错误:

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.min.js?v=1567992324291:1 Uncaught Error: Script error for "@ng-bootstrap/ng-bootstrap", needed by: @ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory, project/src/app/app.component.ngfactory, project/src/app/app.module.ngfactory, project/src/app/app.module
http://requirejs.org/docs/errors.html#scripterror
    at makeError (bundle.min.js?v=1567992324291:169)
    at HTMLScriptElement.onScriptError (bundle.min.js?v=1567992324291:1739)
    at e.invokeTask (zone.min.js?v=1567992324291:1)
    at t.runTask (zone.min.js?v=1567992324291:1)
    at t.invokeTask [as invoke] (zone.min.js?v=1567992324291:1)
    at _ (zone.min.js?v=1567992324291:1)
    at HTMLScriptElement.m (zone.min.js?v=1567992324291:1)

我假设我缺少一些配置？

Answer 1

如果你看到来自 node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.umd.js 的文件，你就会知道它定义了 ngb，不是ng-bootstrap。所以你应该创建一个文件来定义ng-bootstrap，引用ngb，如 rxjs_shims.js.