angular-cli и bootstrap 4

Question

Я перемещаю свои первые шаги с помощью angular 2, в частности, я использую официальный инструмент angular-cli для создания нового проекта.

Я создал новый проект таким образом

ng new [my-project-name]

Проект был создан правильно.

После этого я хотел бы установить bootstrap 4 и следовать официальному руководству на странице angular-cli.

Я устанавливаю бутстрап с npm:

npm install bootstrap@next

и я добавляю строку в мой angular-cli.json:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

в объекте приложения.

Когда я создаю приложение и запускаю его на сервере с помощью: ng serve

Я не нахожу в index.html ссылки для начальной загрузки CSS и JavaScript.

Я не понимаю, был ли импорт этого файла автоматически добавлен в мой index.html или мне нужно добавить его вручную.

Answer 1

Когда вы добавляете записи сценариев и стилей в файл angular.cli.json, они добавляются в глобальную область. В частности, они добавляются в scripts.bundle.js и styles.bundle.js. Нет необходимости добавлять их в index.html. Вы должны хорошо идти после остановки и перезапуска подачи. Для хорошей работы я запускаю восстановление npm после внесения изменений в angular.cli.json.

Answer 2

Вам не нужно ничего добавлять вручную в HTML-файл. Это делается автоматически для вас.

Вот почему:

Ваши стили CSS будут добавлены в styles.bundle.css файл. Таким образом, при запуске приложения вы увидите следующую ссылку на таблицу стилей в своем источнике HTML: <link href="styles.bundle.css" rel="stylesheet">, Если вы нажмете styles.bundle.css в браузере он покажет вам все стили, скомпилированные вместе.

Еще одна важная вещь. Я также предлагаю вам поменять местами порядок таблиц стилей в вашем файле angular-cli.json:

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

Причина вышеуказанного изменения заключается в том, что ваши файлы компилируются и обрабатываются в порядке, указанном вами в файле angular-cli.json. Итак, скажем, если вы написали несколько пользовательских стилей для btn-primary в styles.css, они всегда будут перезаписываться bootstrap.css, и вы никогда не увидите, что ваши стили применяются в пользовательском интерфейсе, и вы не сможете выяснить, что происходит не так.

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

Answer 3

Я не удаляюсь, если импорт этого файла автоматически добавляется в мой index.html или мне нужно добавить его вручную.

Вы должны добавить это самостоятельно.