Bootstrap Glyphicons が angular2 で表示されない。

Angular2アプリでbootstrapのglyphiconsを使おうとしています。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>

styleUrls-にbootstrapを入れました。 styleUrlsです。['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css'] となります。

グリフィコンは以下のように表示されます。 ![ここに画像の説明を入力]]1。

David
編集された質問 1日 8月 2016 в 11:38
プログラミング
web css angular twitter-bootstrap glyphicons
20日 6月 2016 в 6:56
まだビューはありません

をインポートする必要があります。

``)

をindex.htmlに追加します。

解説 (0)

アプリケーションをangular-cli（ 'ng init' または 'ng new' を使って）scaffoldした場合、プロジェクトのルートに angular-cli-build.js ファイルが存在します。

angular-cli-build.js は、プロジェクトのビルド（ 'ng serve' または 'ng build' を使用）において、サードパーティのライブラリを vendor フォルダに配置するよう指示します。

ブートストラップ配布フォルダの中にfontsフォルダがあり、glyphiconsのファイルが入っています。これらの起動ファイルについても、vendor フォルダに配置する必要があります。

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/*'
    ]
  });
};

念のため、bootstrapのセットアップは、以下のような手順で行いました。

コマンドライン。

npm install bootstrap --save

index.html:

'ng serve' を再起動するか、 'ng build&#39 で再構築してください。

ページソースの結果は以下の通りです。

トラフグリフ付きグリフィコン]111[!

David
編集した答え 31日 7月 2016 в 7:36
解説 (0)

なぜかわかりませんが、borwserがglyphiconsのために異なる場所を見ることがわかりました。

@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-regular.woff "

このエラーからわかることは、ブラウザが「localhost:4200/fonts/...」を参照しているということで、「localhost:4200/vendor/bootstrap/dist/fonts/...」でなければなりません。

とにかく、回避策は vendorNpmFiles 配列の angular-cli-build.js ファイル内にブートストラップの dist フォルダを 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' として追加し、 styleUrls からブートストラップスタイルシートを除去することです。

で、index.htmlに以下の行を追加します。

ng serveまたはng build` を忘れないでください。

解説 (0)