Angular 7不呈现引导程序控件

Question

我正在创建一个需要浏览图片的简单系统。

我正在使用纸仪表板引导管理面板

可以在下面找到：

https://www.npmjs.com/package/paper-dashboard

然后，我需要添加文件浏览器功能，例如下面在w3school上找到的屏幕截图

但是它在我的Angular应用程序上无法正常工作或无法正常渲染。 为了检查引导程序代码是否正常工作。 我创建了一个虚拟的html文件，并正确显示了它，如屏幕截图所示。

但这就是它的呈现方式

但是我在angular.json文件中有bootstrap.min.css

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js"
            ],

但是如果我在style.scss导入bootstrap.min.css

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

并在样式数组中将其删除

"styles": [
              "src/styles.scss",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],

变成了这样。 导航显示不正确。

是什么导致了Angular的问题？ 我来自wpf。 而且我正在使用angular 7和asp.net core 2进行自学习。因此，我真的不十分清楚stlye的情况。

谢谢。

Answer 1

从我可以看到的是，您正在从中导入引导程序

"node_modules/bootstrap/dist/css/bootstrap.min.css"

这意味着您将引导程序作为单独的软件包安装，这很可能是最新版本v4.3.1

纸面板正在使用Bootstrap v3.3.5 ，因此您有版本不匹配的情况。 （ 在这里检查 ）

可能的解决方案是：

• npm install bootstrap@3.3.5-它将用3.3.5版本替换当前的Bootstrap安装
• 更改导入以匹配paper-dashboard package的bootstrap.min.css的路径
• 手动更新仪表板以匹配最新版本。