在生产模式下构建时，react-bootstrap bsClass 设置不正确

Question

我运行在生产模式下构建 react-bootstrap 后下拉菜单显示不正确的问题：

仔细检查后，HTML 似乎加载了错误的 class：<ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">。在这种情况下 class 应该是 dropdown-menu 而不是 -menu.

当我检查道具元素时，看起来这是由于 bsClass 设置不正确造成的：

{
  "className": "super-colors",
  "bsRole": "menu",
  "pullRight": false,
  "bsClass": "-menu",
  "open": false,
  "labelledBy": "dropdown-custom-1",
  "onClose": "[function bound ]",
  "onSelect": "[function ]",
  "rootCloseEvent": "mousedown"
}

作为参考，这里是上面显示的元素的代码：

<ButtonToolbar>
  <Dropdown
    id="dropdown-custom-1"
    onToggle={() => console.log('hi')}
    rootCloseEvent="mousedown"
  >
    <Dropdown.Toggle>Pow! Zoom!</Dropdown.Toggle>
    <Dropdown.Menu className="super-colors">
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3" active>
        Active Item
      </MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
    </Dropdown.Menu>
  </Dropdown>
</ButtonToolbar>

一些其他（可能）相关的信息：

我们正在使用一个名为 patternfly-react 的 UI 库，它建立在 react-bootstrap 之上，但问题似乎出在 react-bootstrap.
应用使用react-bootstrap 0.32.1
这仅在应用程序在生产模式下构建时出现，开发模式工作正常。
我们有一个非常规的设置，我们在运行 React 内部 Angular 6 应用程序。

有人知道是什么导致了这种情况发生吗？

Answer 1

所以，这原来是 Angular 的问题。在 angular.json 中禁用构建优化解决了这个问题。

"production": {
  ...
  "vendorChunk": false,
  "buildOptimizer": false,

构建优化器减小了编译包的大小，因此虽然此解决方案有效，但并非没有缺点。

在生产模式下构建时，react-bootstrap bsClass 设置不正确

react-bootstrap bsClass getting set incorrectly when built in production mode

react-bootstrap

patternfly