Нет глифического вывода в Angular с bootstrap

Question

Я пытаюсь вывести глификон-звездочку . Я установил bootstrap и создал компонент с именем favourite , используя angular cli. Это содержимое моего favouriteponpon. html

<span class="glyphicon glyphicon-star"></span>

Ниже приводится содержимое моего favouriteponpon.ts

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

и ниже приводится содержимое моего app.component. html

<favorite></favorite>

Иногда я получаю [WDS] Отключено! ошибка. Но я не получаю желаемый результат. Я попытался выполнить npm update

PS: Когда я пытаюсь отобразить основную кнопку, она работает нормально.

Answer 1

Вы должны добавить bootstrap минимизированный файл стилей в массив стилей в angular.json

{ ... "projects": { "contactsapp": { ... "architect": { "build": { ... "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ...

Answer 2

1. Вам необходимо установить Bootstrap и jQuery

   ПРИМЕР:

   cd myProject
   npm install --save bootstrap jquery
   

2. Обновление angular. json:

   ПРИМЕР:

   {
     ...
     "projects": {
     "contactsapp": {
       ...
       "architect": {
           "build": {
            ...
           "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
               ...
           "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
   

3. Используйте Bootstrap в своих шаблонах

   ПРИМЕР: favouriteponponent. html

   <span class="glyphicon glyphicon-star"></span>
   

Если у вас все еще есть проблемы / вопросы, я нашел этот урок полезным:

Разработка Angular приложения с Bootstrap, Ахмед Бушефра

Answer 3

Код не работает с bootstrap 4, но отлично работает с bootstrap 3.3.7.