бутстрап не рендеринг в угловой 7

Question

Я следую этому уроку: https://codeburst.io/getting-started-with-angular-7-and-bootstrap-4-styling-6011b206080

Я только что сгенерировал новый угловой проект с cli. включенная маршрутизация, таблицы стилей scss.

Я выполнил загрузочную jquery-версию npm и включил их следующим образом:

angular.json

"projects": {
"myproject": {
  ...,
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...,
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
...

Таблица стилей начальной загрузки включена в файл styles.scss, поэтому я могу переопределить переменные, если захочу:

styles.scss

@import '~bootstrap/scss/bootstrap.scss';

Затем я добавил навигационную панель следующим образом:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand">Angular Router</a>
    <ul class="nav navbar-nav" routerLinkActive="active">
        <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
</nav>

При отображении страницы она выглядит так:

Единственная причина, по которой ссылки видны, это то, что я их выбрал. Их шрифт кажется белым. Сама панель навигации не отображается, как я ожидал от начальной загрузки.

Что мне не хватает? Я не вижу ошибок в консоли или инструментах разработчика.

РЕДАКТИРОВАТЬ: вопрос был помечен как дубликат , как добавить начальную загрузку в угловой 6 . Однако это не так, поскольку я следовал инструкциям в этом ответе, как вы можете видеть из кода, который я разместил, и он все еще не работает.

РЕДАКТИРОВАТЬ 2: Нет предупреждений или ошибок в консоли. Он даже показывает, что стили найдены, поэтому я сомневаюсь, что это проблема установки / импорта.

Answer 1

Проблема не в вашей конфигурации, а в том, как структурирован ваш HTML и отсутствует CSS, необходимый для панели навигации.

Вот как должен выглядеть ваш HTML-код для панели навигации:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
  </div>
</nav>

См., Например, stackblitz , убедитесь, что экран достаточно большой, чтобы показать содержимое, или https://angular -xbbtq9.stackblitz.io / для полного экрана.(обратите внимание, рабочий вверху, ваш внизу)

Answer 2

в ваших style.scss файлах используйте import

@import "../node_modules/bootstrap/scss/bootstrap.scss"

и удалите "node_modules/bootstrap/scss/bootstrap.scss" из angular.json file

Answer 3

Переустановите загрузчик через [https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap[1]

Установить зависимости:

npm установить загрузчик --save npm установить jquery --save npm установить popper.js --save

Остерегайтесь popper.js. Эта библиотека используется Bootstrap. Однако вы должны точно запустить npm install popper.js --save, потому что popper - это еще одна js-библиотека, распространяемая npm.

Интеграция зависимостей в ваш проект

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Наконец, откройте src \ styles.css и добавьте:

@ import "~ bootstrap / dist / css / bootstrap.css";

Проверьте, доступен ли плагин начальной загрузки в файле json пакета.

Answer 4

Вам нужно добавить CSS Bootstrap в angular.json:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],