How to Install Bootstrap 4 in Angular 6
Bagaimana cara menggunakan Bootstrap dalam proyek Angular?
Saya memulai aplikasi Angular pertama saya dan pengaturan dasar saya selesai.
Bagaimana saya bisa menambahkan Bootstrap ke aplikasi saya?
Jika Anda bisa memberikan contoh maka itu akan sangat membantu.
Jawaban:
Asalkan Anda menggunakan Angular-CLI untuk menghasilkan proyek baru, ada cara lain untuk membuat bootstrap dapat diakses di Angular 2/4 .
- Melalui antarmuka baris perintah, navigasikan ke folder proyek. Kemudian gunakan NPM untuk menginstal bootstrap:
$ npm install --save bootstrap. The--savepilihan akan membuat bootstrap muncul di dependensi. - Edit file .angular-cli.json, yang mengonfigurasi proyek Anda. Itu ada di dalam direktori proyek. Tambahkan referensi ke
"styles"array. Referensi harus merupakan jalur relatif ke file bootstrap yang diunduh dengan npm. Dalam kasus saya ini:"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Contoh saya .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" : {} } } Sekarang bootstrap harus menjadi bagian dari pengaturan default Anda.
Integrasi dengan Angular2 juga tersedia melalui proyek ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .
Untuk menginstalnya cukup letakkan file-file ini di halaman HTML utama Anda:
< 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" > Kemudian Anda dapat menggunakannya ke komponen Anda dengan cara ini:
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 { } Yang perlu Anda lakukan adalah memasukkan boostrap css ke dalam file index.html Anda.
< link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous" > Alternatif lain yang sangat bagus (lebih baik?) Adalah dengan menggunakan satu set widget yang dibuat oleh tim angular-ui: https://ng-bootstrap.github.io
Jika Anda berencana untuk menggunakan Bootstrap 4 yang diperlukan dengan ng-bootstrap tim angular-ui yang disebutkan di utas ini, Anda sebaiknya menggunakan ini (CATATAN: Anda tidak perlu memasukkan file 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" > Anda juga dapat mereferensikan ini secara lokal setelah menjalankan npm install bootstrap@4.0.0-alpha.6 --savedengan menunjuk ke file di styles.scssfile Anda , dengan asumsi Anda menggunakan SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css' ; Opsi paling populer adalah menggunakan beberapa perpustakaan pihak ketiga yang didistribusikan sebagai paket npm seperti proyek ng2-bootstrap https://github.com/valor-software/ng2-bootstrap atau perpustakaan Angular UI Bootstrap.
Saya pribadi menggunakan ng2-bootstrap. Ada banyak cara untuk mengkonfigurasinya, karena konfigurasi bergantung pada bagaimana proyek Angular Anda dibuat. Di bawah ini saya memposting konfigurasi contoh berdasarkan proyek Angular 2 QuickStart https://github.com/angular/quickstart
Pertama kami menambahkan dependensi di package.json kami
{ ... "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" }, ... } Kemudian kita harus memetakan nama ke URL yang tepat di systemjs.config.js
( 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 ); Kita harus mengimpor file .strs bootstrap di index.html. Kita bisa mendapatkannya dari direktori / node_modules / bootstrap pada hard drive kita (karena kita menambahkan dependensi bootstrap 3.3.7) atau dari web. Di sana kami mendapatkannya dari 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 > Kita harus mengedit file app.module.ts dari direktori / app
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 { } Dan akhirnya file app.component.ts kami dari direktori / app
import { Component } from '@angular/core' ; @Component ({ selector : 'my-app' , template : ` < alert type = "success" > Well done ! </ alert > ` }) export class AppComponent { constructor () { } } Maka kita harus menginstal dependensi bootstrap dan ng2-bootstrap sebelum kita menjalankan aplikasi. Kita harus pergi ke direktori dan jenis proyek kami
npm install Akhirnya kita dapat memulai aplikasi kita
npm start Ada banyak contoh kode pada proyek ng2-bootstrap github yang menunjukkan bagaimana cara mengimpor ng2-bootstrap ke berbagai build proyek Angular 2. Bahkan ada sampel plnkr. Ada juga dokumentasi API di situs Valor-software (penulis perpustakaan).
Dalam lingkungan sudut-cli, cara paling mudah yang saya temukan adalah sebagai berikut:
1. Solusi dalam lingkungan dengan stylesheet s̲c̲s̲s̲
npm install bootstrap - sass — save Dalam style.scss:
$icon - font - path : '~bootstrap-sass/assets/fonts/bootstrap/' ; @import '~bootstrap-sass/assets/stylesheets/bootstrap' ; Note1: ~Karakter adalah referensi ke folder nodes_modules .
Note2: Saat kita menggunakan scss, kita dapat menyesuaikan semua variabel boostrap yang kita inginkan.
2. Solusi dalam lingkungan dengan stylesheet c̲s̲s̲
npm install bootstrap — save Dalam style.css:
@import '~bootstrap/dist/css/bootstrap.css' ; Ada beberapa cara untuk mengkonfigurasi angular2 dengan Bootstrap, salah satu cara paling lengkap untuk mendapatkan yang terbaik adalah dengan menggunakan ng-bootstrap, menggunakan konfigurasi ini kami berikan kepada algular2 kontrol penuh atas DOM kami, menghindari kebutuhan untuk menggunakan JQuery dan Boostrap .js.
1-Ambil sebagai titik awal proyek baru yang dibuat dengan Angular-CLI dan menggunakan baris perintah, instal ng-bootstrap:
npm install @ng - bootstrap / ng - bootstrap -- save Catatan: Info lebih lanjut di https://ng-bootstrap.github.io/#/getting-started
2-Lalu kita perlu menginstal bootstrap untuk css dan sistem grid.
npm install bootstrap@4 . 0.0 - beta . 2 -- save Catatan: Info lebih lanjut di https://getbootstrap.com/docs/4.0/getting-started/download/
Sekarang kita memiliki pengaturan lingkungan dan untuk itu kita harus mengubah .angular-cli.json menambahkan gaya:
"../node_modules/bootstrap/dist/css/bootstrap.min.css" Berikut ini sebuah contoh:
"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" } } ] Langkah selanjutnya adalah menambahkan modul ng-boostrap ke proyek kami, untuk melakukannya kita perlu menambahkan di app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ; Kemudian tambahkan modul baru ke aplikasi aplikasi: NgbModule.forRoot ()
Contoh:
@NgModule ({ declarations : [ AppComponent , AppNavbarComponent ], imports : [ BrowserModule , NgbModule . forRoot () ], providers : [], bootstrap : [ AppComponent ] }) Sekarang kita dapat mulai menggunakan bootstrap4 pada proyek angular2 / 5 kita.
Saya memiliki pertanyaan yang sama dan menemukan artikel ini dengan solusi yang sangat bersih:
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
Berikut adalah instruksinya, tetapi dengan solusi sederhana saya:
Instal Bootstrap 4 ( instruksi ):
npm install -- save bootstrap@4 . 0.0 - alpha . 6 Jika perlu, ubah nama src / styles.css Anda menjadi styles.scss dan perbarui .angular-cli.json untuk mencerminkan perubahan:
"styles" : [ "styles.scss" ], Kemudian tambahkan baris ini ke styles.scss :
@import '~bootstrap/scss/bootstrap' ; cukup periksa file package.json Anda dan tambahkan dependensi untuk bootstrap
"dependencies" : { "bootstrap" : "^3.3.7" , } kemudian tambahkan kode di bawah ini pada .angular-cli.jsonfile
"styles" : [ "styles.css" , "../node_modules/bootstrap/dist/css/bootstrap.css" ], Akhirnya Anda hanya memperbarui npm Anda secara lokal dengan menggunakan terminal
$ npm update - npm instal --save bootstrap
-
buka -> file angular-cli.json , temukan properti styles dan tambahkan saja sengatan berikutnya: "../node_modules/bootstrap/dist/css/bootstrap.min.css", ini mungkin terlihat seperti ini:
"styles" : [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" , "styles.css" ],
Prosedur dengan Angular 6+ & Bootstrap 4+:
- Buka shell di folder proyek Anda
- Instal bootstrap dengan perintah:
npm install --save bootstrap@4.1.3 - Bootstrap memerlukan jquery dependensi, jadi jika Anda tidak memilikinya, Anda dapat menginstalnya dengan perintah:
npm install --save jquery 1.9.1 - Anda mungkin perlu memperbaiki kerentanan dengan perintah:
npm audit fix - Di file style.scss utama Anda, tambahkan baris berikut:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
ATAU
Tambahkan baris ini ke file index.html utama Anda: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Rekomendasi saya akan bukannya mendeklarasikannya di json stylus untuk meletakkannya di scss sehingga semuanya dikompilasi dan di satu tempat.
1) instal bootstrap dengan npm
npm install bootstrap 2) Nyatakan bootstrap npm di css dengan gaya kami
Buat _bootstrap-custom.scss:
// Required @import "bootstrap-custom-required" ; // Optional @import "~bootstrap/scss/root" ; @import "~bootstrap/scss/grid" ; @import "~bootstrap/scss/tables" ; ... .. . 3) Di dalam styles.scss yang kami masukkan
@import "bootstrap-custom" ; jadi kita akan memiliki semua inti kita dikompilasi dan di satu tempat
Anda dapat mencoba menggunakan perpustakaan Prettyfox UI http://ng.prettyfox.org
Perpustakaan ini menggunakan bootstrap 4 gaya dan tidak perlu jquery.
tambahkan baris berikut di halaman html Anda
< 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" > Jika Anda menggunakan angular cli, setelah menambahkan bootstrap ke package.json dan instal paketnya, yang Anda butuhkan adalah menambahkan boostrap.min.css ke dalam bagian "styles" cli.json.
Satu hal penting adalah "Ketika Anda melakukan perubahan pada .angular-cli.json, Anda perlu memulai kembali servis untuk mengambil perubahan konfigurasi."
Ref:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
How to Install Bootstrap 4 in Angular 6
Source: https://qastack.id/programming/36292438/how-to-use-bootstrap-in-an-angular-project