最初のAngularアプリケーションを開始し、基本的なセットアップが完了しました。
Bootstrapをアプリケーションに追加するにはどうすればよいですか？
あなたが例を提供することができれば、それは大きな助けになるでしょう。
最初のAngularアプリケーションを開始し、基本的なセットアップが完了しました。
Bootstrapをアプリケーションに追加するにはどうすればよいですか？
あなたが例を提供することができれば、それは大きな助けになるでしょう。
回答:
あなたが使用して提供アンギュラ-CLIを新しいプロジェクトを生成するために、ブートストラップにアクセスできるようにする別の方法があります角2/4。
$ npm install --save bootstrap。この--saveオプションにより、ブートストラップが依存関係に表示されます。"styles"配列への参照を追加します。参照は、npmでダウンロードされたブートストラップファイルへの相対パスである必要があります。私の場合は："../node_modules/bootstrap/dist/css/bootstrap.min.css",私の例.angular-cli.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}これで、ブートストラップはデフォルト設定の一部になります。
Angular2との統合は、ng2-bootstrapプロジェクト（https://github.com/valor-software/ng2-bootstrap）からも利用できます。
これをインストールするには、これらのファイルをメインのHTMLページに配置するだけです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">次に、この方法でコンポーネントに使用できます。
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}あなたがしなければならないすべてはあなたのindex.htmlファイル内のboostrap cssを含めることです。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">app.component.html。教えてください。
もう1つの非常に優れた（より良い？）代替手段は、angular-uiチームによって作成された一連のウィジェットを使用することです：https : //ng-bootstrap.github.io
このスレッドで言及されているangular-uiチームのng-bootstrapで必要なBootstrap 4を使用する予定の場合は、代わりにこれを使用する必要があります（注：JSファイルを含める必要はありません）。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">SASSを使用していると仮定しnpm install bootstrap@4.0.0-alpha.6 --saveて、ファイル内のstyles.scssファイルをポイントすることで、実行後にこれをローカルで参照することもできます。
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';@importことをSASSファイルに追加するだけです。そうでない場合は、vendor.tsファイルに追加してみることができますが、コードでは使用していません。
最も人気のあるオプションは、ng2-bootstrapプロジェクトhttps://github.com/valor-software/ng2-bootstrapのようなnpmパッケージとして配布されるサードパーティライブラリを使用することですまたはAngular UI Bootstrapライブラリのです。
個人的にはng2-bootstrapを使用しています。構成はAngularプロジェクトのビルド方法に依存するため、構成には多くの方法があります。その下に、Angular 2 QuickStartプロジェクトに基づいた設定例の投稿https://github.com/angular/quickstart
まず、package.jsonに依存関係を追加します
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }次に、systemjs.config.jsで適切なURLに名前をマッピングする必要があります
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);ブートストラップ.cssファイルをindex.htmlにインポートする必要があります。ハードドライブの/ node_modules / bootstrapディレクトリ（bootstrap 3.3.7の依存関係を追加したため）またはWebから取得できます。そこで私たちはそれをウェブから取得しています：
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>/ appディレクトリからapp.module.tsファイルを編集する必要があります
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }そして最後に/ appディレクトリからのapp.component.tsファイル
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}次に、アプリを実行する前に、ブートストラップとng2-bootstrapの依存関係をインストールする必要があります。プロジェクトディレクトリに移動して、
npm install最後に、アプリを起動できます
npm startng2-bootstrapプロジェクトgithubには、ng2-bootstrapをさまざまなAngular 2プロジェクトビルドにインポートする方法を示す多くのコードサンプルがあります。plnkrサンプルもあります。Valor-ソフトウェア（ライブラリの作成者）のWebサイトにもAPIドキュメントがあります。
angular-cli環境で、私が見つけた最も簡単な方法は次のとおりです。
1. s̲c̲s̲s̲スタイルシートのある環境でのソリューション
npm install bootstrap-sass —savestyle.scssで：
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';注1：この~文字は、nodes_modulesフォルダーへの参照です。
注2：scssを使用しているため、必要なすべてのブーストラップ変数をカスタマイズできます。
2. c̲s̲s̲スタイルシートがある環境でのソリューション
npm install bootstrap —savestyle.cssで：
@import '~bootstrap/dist/css/bootstrap.css';Angular2をBootstrapで構成する方法はいくつかありますが、ng-bootstrapを使用するのが最も完全な方法の1つです。この構成を使用して、DOMをalgular2で完全に制御し、JQueryとBoostrapを使用する必要をなくします。 .js。
1-Angular-CLIで作成した新しいプロジェクトを開始点として、コマンドラインを使用してng-bootstrapをインストールします。
npm install @ng-bootstrap/ng-bootstrap --save注：詳しくはhttps://ng-bootstrap.github.io/#/getting-startedをご覧ください
2-次に、CSSとグリッドシステムのブートストラップをインストールする必要があります。
npm install bootstrap@4.0.0-beta.2 --save注：詳細については、https：//getbootstrap.com/docs/4.0/getting-started/download/をご覧ください。
これで環境がセットアップされました。そのために、スタイルに追加する.angular-cli.jsonを変更する必要があります。
"../node_modules/bootstrap/dist/css/bootstrap.min.css"次に例を示します。
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]次のステップは、ng-boostrapモジュールをプロジェクトに追加することです。これを行うには、app.module.tsに追加する必要があります。
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';次に、アプリケーションモジュールに新しいモジュールを追加します：NgbModule.forRoot（）
例：
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})これで、angular2 / 5プロジェクトでbootstrap4の使用を開始できます。
私は同じ質問をして、本当にきれいな解決策でこの記事を見つけました：
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
手順は次のとおりですが、私の簡単な解決策では：
Bootstrap 4をインストールします（手順）：
npm install --save bootstrap@4.0.0-alpha.6必要に応じて、src / styles.cssの名前をstyles.scssに変更し、.angular-cli.jsonを更新して変更を反映します。
"styles": [
"styles.scss"
],次に、この行をstyles.scssに追加します。
@import '~bootstrap/scss/bootstrap';package.jsonファイルを確認して、ブートストラップの依存関係を追加するだけです
"dependencies": {
"bootstrap": "^3.3.7",
}次に、.angular-cli.jsonファイルに以下のコードを追加します
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],最後に、ターミナルを使用してローカルでnpmを更新します
$ npm updateAngular 6以降とBootstrap 4以降の手順：
npm install --save bootstrap@4.1.3npm install --save jquery 1.9.1npm audit fix@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";または
次の行をメインのindex.htmlファイルに追加します。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
同じ答えを探していたところ、ようやくこのリンクが見つかりました。あなたは角度2プロジェクトにブートストラップCSSを追加する方法を説明した3つの異なる方法を見つけることができます。それは私を助けました。
ここにリンクがあります：http : //codingthesmartway.com/using-bootstrap-with-angular/
私の推奨は、jsonスタイラスで宣言してscssに配置することではなく、すべてが1つの場所にコンパイルされるようにすることです。
1）npmでブートストラップをインストールする
npm install bootstrap2）私たちのスタイルでcssでブートストラップnpmを宣言します
作成_bootstrap-custom.scss：
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.3）styles.scss内に挿入します
@import "bootstrap-custom";すべてのコアを1つの場所にコンパイルして
Prettyfox UIライブラリhttp://ng.prettyfox.orgを使用してみることができます
このライブラリはブートストラップ4スタイルを使用し、jqueryを必要としません。
angular cliを使用する場合は、package.jsonにブートストラップを追加してパッケージをインストールした後、boostrap.min.cssを.angular-cli.jsonの "styles"セクションに追加するだけです。
重要なことの1つは、「。angular-cli.jsonに変更を加えるときは、構成の変更を取得するためにng serveを再起動する必要があります」です。
参照：
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap