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。
をインポートする必要があります。
<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に追加します。
アプリケーションを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:
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
'ng serve' を再起動するか、 'ng build' で再構築してください。
ページソースの結果は以下の通りです。
なぜかわかりませんが、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に以下の行を追加します。
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
ng serveまたは
ng build` を忘れないでください。