it-swarm.com.ru

Bootstrap Глификоны не отображаются в angular2

Я пытаюсь использовать bootstrap glyphicons в моем приложении angular2. Я установил bootstrap с помощью команды npm install bootstrap --save Мой фрагмент кода

 <button *ngIf="pos.name == uname" type="button" class="btn btn-default       btn-sm delete" (click)="DeleteBulletin();">
   <span class="glyphicon glyphicon-trash glyph"></span>  Delete
 </button>

Я включил bootstrap в мои styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

Глификон выглядит как показано enter image description here

14
Sahana ys

Вы должны импортировать 

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

на ваш index.html

9
supersonic

Boostrap 4 больше не поддерживает Глификоны, вместо этого вы можете использовать Font Awesome :

npm install --save font-awesome

и добавьте файл CSS в ваш .angular-cli.json

"apps": [
          {
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],

Замените CSS-класс классами Font Awesome:

<i class="navbar-toggler-icon fa fa-bars"> </i>

перекомпилировать приложение: ng serve

5
Sebastian Viereck

Я установил bootstrap3 как npm, установил bootstrap @ 3, и он начал работать

просто нужно добавить в angular-cli.json: -

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

Существует файл angular-cli-build.js корневого каталога проекта, если ваше приложение было очищено с помощью angular-cli (с использованием 'ng init' или 'ng new').

angular-cli-build.js указывает сборку проекта (используя 'ng serve' или 'ng build') для помещения сторонних библиотек в папку vendor.

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

angular-cli-build.js

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.min.css',
      'bootstrap/dist/fonts/*'
    ]
  });
};  

Для полноты, процесс установки для начальной загрузки был в этих нескольких шагах ниже:

Commnad line:

npm install bootstrap --save

index.html:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Перезапустите 'ng serve' или просто пересоберите 'ng build' 

Вот результат страницы источника:

 Glyphicon with trach glyph

3
David

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

@Component({
   moduleId: module.id,
   selector: 'app-projects',
   templateUrl: 'projects.component.html',
   styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
   providers:[ProjectsService]
})

использование вышеупомянутого метода для вызова файла таблицы начальной загрузки приводит к следующей ошибке "GET http: // localhost: 4200/fonts/glyphicons-halflings-регулярно.woff "

из ошибки видно, что браузер просматривает localhost:4200/fonts/..., где он должен быть localhost:4200/vendor/bootstrap/dist/fonts/...

в любом случае, для решения этой проблемы убедитесь, что вы добавили папку dist начальной загрузки в файл angular-cli-build.js в массиве vendorNpmFiles как 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' и удалили таблицу стилей начальной загрузки из styleUrls.

затем добавьте в index.html следующую строку:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

не забудьте ng serve или ng build

1
AliAwwad

Если вы используете Bootstrap 4, он не включает глификон в самовоспроизведение . Таким образом, вы можете использовать другой пакет значков, такой как FontAwesome, или установить Глификоны отдельно.

Я использую FontAwesome и это зависимости в моих случаях:

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "TypeScript": "~2.4.2"
  }

В HTML-шаблонах просто поместите такой код:

<i class="fa fa-refresh" aria-hidden="true"></i>
1
Pax Beach

Пожалуйста, запустите 

npm install glyphicons --save

и, пожалуйста, импортируйте глифы в ваш компонент

 import icons from 'glyphicons';
    var icons = require('glyphicons');
    console.info('This is' + icons.heart+ ' Glyphicons!')

Вы можете проверить один раз в консоли браузера.

0
Samudrala Ramu