如何修复浏览器未捕获的错误：“ @ ng-bootstrap / ng-bootstrap” ng-boostrap Bazel的脚本错误

时间：2019-09-09 02:11:48

标签： angular bazel ng-bootstrap

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

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

叉子angular-bazel-example

  1. 添加ng-bootstrap 
yarn add @ng-bootstrap/ng-bootstrap
  1. 将ngb添加到angular-metadata.tsconfig.json 
"node_modules/@ng-bootstrap/**/*"
  1. 运行postinstall 
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服务
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构建
$ 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)

我假设我缺少一些配置吗？

1 个答案:

答案 0 :(得分：0)

如果您看到node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.umd.js中的文件，您将知道它定义了ngb，而不是ng-bootstrap。因此，您应该创建一个文件来定义ng-bootstrap，请参考到ngb，就像rxjs_shims.js。

相关问题
最新问题