响应-在生产模式中内置时，引导bsClass设置不正确。

Question

我遇到了一个问题，在构建了在生产模式中的running引导之后，下拉菜单显示不正确：

​

​

仔细检查后，看起来HTML中装载了错误的类：<ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">。在这种情况下，类应该是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引导之上的，但是问题似乎是在react引导上。
• 该应用程序使用了react bootstrap 0.32.1。
• 只有当应用程序是在生产模式下构建时，开发模式才会显示出来。
• 我们有一个相当非常规的设置，我们运行反应在一个角度6应用程序。

有人知道是什么导致了这件事吗？

Answer 1

所以，这是一个角的问题。禁用angular.json中的构建优化解决了这个问题。

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

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