Angular 7 не рендерит загрузочный контроль

Question

Я создаю простую систему, которая должна будет просматривать картинку.

Я использую админ-панель начальной загрузки бумаги-приборной панели

, который можно найти ниже:

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

Затем мне нужно добавить функциональность браузера файлов, как на скриншоте ниже, который я нашел на w3school

Но в моем приложении Angular он не работает и не отображается должным образом. Чтобы проверить, правильно ли работает код начальной загрузки. Я создал фиктивный HTML-файл, и он правильно отображался, как на скриншоте.

Но вот как это выглядит

Но у меня есть bootstrap.min.css в файле angular.json

"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"
            ],

Но если я импортирую bootstrap.min.css в style.scss

@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. Так что у меня действительно нет четкого понимания, что происходит со стилем.

Спасибо.

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.min.css, расположенному в paper-dashboard package
• , обновите панель вручную, чтобы она соответствовала самой новой версии.