Bootstrap 4药丸在Angular6中不能正常工作

的原因是由于Bootstrap 4和Angular6之间存在兼容性问题。Bootstrap是一个用于构建响应式和移动设备优先的Web开发框架，而Angular是一个用于构建单页应用的JavaScript框架。

在Angular6中，由于Bootstrap 4使用了jQuery和Popper.js这两个库，而Angular6默认不支持直接引入这些库。因此，如果直接将Bootstrap 4的药丸代码复制到Angular6项目中，可能会导致药丸无法正常工作。

为了解决这个问题，可以采取以下几种方法：

1. 使用ngx-bootstrap库：ngx-bootstrap是一个基于Bootstrap的开源库，专门为Angular开发者提供了对Bootstrap组件的支持。通过使用ngx-bootstrap，可以在Angular6中正常使用Bootstrap 4的药丸。具体使用方法可以参考ngx-bootstrap的官方文档：ngx-bootstrap官方文档
2. 手动引入jQuery和Popper.js：如果不想使用第三方库，也可以手动引入jQuery和Popper.js。首先，在Angular6项目中安装jQuery和Popper.js的npm包：npm install jquery popper.js。然后，在angular.json文件中的"scripts"数组中添加引入jQuery和Popper.js的路径。最后，在需要使用药丸的组件中，通过import语句引入jQuery和Popper.js：import * as $ from 'jquery';和import * as Popper from 'popper.js';。
3. 使用其他UI框架：除了Bootstrap，还有许多其他的UI框架可以在Angular6中使用，例如Material Design、PrimeNG等。这些框架都提供了丰富的组件和样式，可以满足大部分的前端开发需求。

总结起来，解决Bootstrap 4药丸在Angular6中不能正常工作的问题，可以选择使用ngx-bootstrap库、手动引入jQuery和Popper.js，或者考虑使用其他UI框架。具体选择哪种方法取决于项目需求和个人偏好。