Angular 4: Bagaimana cara menyertakan Bootstrap?

Saya adalah pengembang backend dan saya hanya bermain-main dengan Angular4. Jadi saya melakukan tutorial instalasi ini: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Mengingat ini, bagaimana saya bisa menambahkan bootstrap ke aplikasi sehingga saya bisa menggunakan kelas "container-fluid" atau "col-md-6" dan hal-hal seperti itu?

npm install --save bootstrap

setelah itu, di dalam angular-cli.json (di dalam folder root proyek), temukan stylesdan tambahkan file css bootstrap seperti ini:

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

UPDATE:
dalam sudut 6+ angular-cli.json diubah menjadi angular.json.

Tonton Video atau Ikuti langkahnya

Pasang bootstrap 4 pada sudut 2 / sudut 4 / sudut 5 / sudut 6

Ada tiga cara untuk memasukkan bootstrap dalam proyek Anda
1) Tambahkan Tautan CDN di file index.html
2) Instal bootstrap menggunakan npm dan setel jalur di angular.json Disarankan
3) Instal bootstrap menggunakan npm dan setel jalur di file index.html

Saya merekomendasikan Anda mengikuti 2 metode yang menginstal bootstrap menggunakan npm karena diinstal di direktori proyek Anda dan Anda dapat dengan mudah mengaksesnya

Metode 1

Tambahkan jalur CDN Bootstrap, Jquery dan popper.js ke file index.html proyek sudut Anda

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

Metode 2

1) Instal bootstrap menggunakan npm

npm install bootstrap --save

setelah install bootstrap 4, kita membutuhkan dua paket javascript lagi yaitu jquery dan popper.js tanpa kedua paket tersebut bootstrap belum lengkap karena bootstrap 4 menggunakan paket jquery dan popper.js jadi kita harus menginstal juga

2) Pasang JQUERY

npm install jquery --save

3) Pasang Popper.js

npm install popper.js --save

Sekarang Bootstrap terinstal pada Direktori Proyek Anda di dalam Folder node_modules

buka angular.json file ini tersedia di direktori angular Anda buka file itu dan tambahkan jalur file bootstrap, jquery, dan popper.js di dalam jalur gaya [] dan skrip [] lihat contoh di bawah ini

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Catatan: Jangan ubah urutan file js seperti ini

Metode 3

Instal bootstrap menggunakan npm ikuti Metode 2 di metode 3 kami hanya mengatur jalur di dalam file index.html alih- alih file angular.json

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Sekarang Bootstrap Bekerja dengan baik Sekarang

Untuk mengkonfigurasi / mengintegrasikan / menggunakan Bootstrap secara angular, pertama-tama kita perlu menginstal paket Bootstrap menggunakan npm.

Instal paket

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Catatan: Perintah --save akan menyimpan ketergantungan di aplikasi sudut kita di dalam file package.json.

Sekarang setelah kita menginstal paket dengan langkah di atas, sekarang kita dapat memberi tahu Angular CLI bahwa ia perlu memuat gaya ini dengan menggunakan salah satu opsi di bawah atau keduanya:

opsi 1) Menambahkan ke dalam file src / styles.css

kita dapat menambahkan dependensi seperti yang ditunjukkan di bawah ini:

@import "~bootstrap/dist/css/bootstrap.min.css";

Opsi 2) Menambahkan ke angular-cli.json atau angular.json

Kita bisa menambahkan file style css ke file angular-cli.json atau angular.json yang ada di folder root aplikasi angular kita seperti yang ditunjukkan di bawah ini:

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

Angular 4 - Pengaturan Bootstrap / @ ng-bootstrap

Pertama instal bootstrap ke dalam proyek Anda menggunakan perintah di bawah ini:

npm install --save bootstrap

Kemudian tambahkan baris ini "../node_modules/bootstrap/dist/css/bootstrap.min.css" ke file angular-cli.json (folder root) dengan gaya

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

Setelah menginstal dependensi di atas, instal ng-bootstrap melalui:

npm install --save @ng-bootstrap/ng-bootstrap

Setelah terinstal, Anda perlu mengimpor modul utama.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Setelah ini, Anda dapat menggunakan Semua widget Bootstrap (mis. Carousel, modal, popovers, tooltips, tab, dll.) Dan beberapa item tambahan (datepicker, rating, timepicker, typeahead).

Di Angular4 saat Anda berurusan dengan sistem @types , Anda harus melakukan hal-hal berikut,

Melakukan,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

cari tipe array dan tambahkan entri jquery dan bootstrap ,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

di bagian kepala tambahkan entri berikut,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

Dan mulai gunakan jquery dan bootstrap keduanya.

Jika Anda menggunakan Sass / Scss, ikuti ini,

Lakukan npm install

npm install bootstrap --save

dan tambahkan importpernyataan ke file sass / scss Anda,

@import '~bootstrap/dist/css/bootstrap.css'

Untuk langkah-langkah detail di bawah ini dan contoh kerja, Anda dapat mengunjungi https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Langkah-langkah yang sangat detail dengan penjelasan yang tepat.

Langkah-langkah: Menginstal Bootstrap dari NPM

Selanjutnya, kita perlu menginstal Bootstrap. Ubah direktori ke proyek yang kita buat (cd angular-bootstrap-example) dan jalankan perintah berikut:

Untuk Bootstrap 3:

npm install bootstrap --save

Untuk Bootstrap 4 (saat ini dalam versi beta):

npm install bootstrap@next --save

ATAU Alternatif: CSS Bootstrap Lokal Sebagai alternatif, Anda juga dapat mengunduh CSS Bootstrap dan menambahkannya secara lokal ke proyek Anda. Saya mendownload Bootstrap dari situs web dan membuat gaya folder (setingkat dengan styles.css):

Catatan: Jangan letakkan file CSS lokal Anda di bawah folder aset. Saat kita melakukan produksi build dengan Angular CLI, file CSS yang dideklarasikan di .angular-cli.json akan dikecilkan dan semua gaya akan digabungkan menjadi satu styles.css. Folder aset disalin ke folder dist selama proses pembuatan (kode CSS akan diduplikasi). Tempatkan hanya file CSS lokal Anda di bawah aset jika Anda mengimpornya langsung di index.html.

Mengimpor CSS 1. Kami memiliki dua opsi untuk mengimpor CSS dari Bootstrap yang diinstal dari NPM:

teks kuat 1: Konfigurasi .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Impor langsung ke src / style.css atau src / style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

Saya pribadi lebih suka mengimpor semua gaya saya di src / style.css karena sudah dideklarasikan di .angular-cli.json.

3.1 Alternatif: CSS Bootstrap Lokal Jika Anda menambahkan file CSS Bootstrap secara lokal, cukup impor ke .angular-cli.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

atau src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Komponen JavaScript Bootstrap dengan ngx-bootstrap (Opsi 1) Jika Anda tidak perlu menggunakan komponen JavaScript Bootstrap (yang memerlukan JQuery), ini semua penyiapan yang Anda butuhkan. Tetapi jika Anda perlu menggunakan modals, accordion, datepicker, tooltips, atau komponen lainnya, bagaimana kita dapat menggunakan komponen ini tanpa menginstal jQuery?

Ada perpustakaan pembungkus Angular untuk Bootstrap yang disebut ngx-bootstrap yang juga dapat kita instal dari NPM:

npm install ngx-bootstrap --save

Catatan ng2-bootstrap dan ngx-bootstrap adalah paket yang sama. ng2-bootstrap diganti namanya menjadi ngx-bootstrap setelah #itsJustAngular.

Jika Anda ingin menginstal Bootstrap dan ngx-bootstrap secara bersamaan saat Anda membuat proyek CLI Angular:

npm install bootstrap ngx-bootstrap --save

4.1: Menambahkan modul Bootstrap yang diperlukan di app.module.ts

Buka ngx-bootstrap dan tambahkan modul yang diperlukan di app.module.ts Anda. Misalnya, kita ingin menggunakan komponen Dropdown, Tooltip dan Modal:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Karena kita memanggil metode .forRoot () untuk setiap modul (karena penyedia modul ngx-bootstrap), fungsionalitas tersebut akan tersedia di semua komponen dan modul proyek Anda (cakupan global).

Sebagai alternatif, jika Anda ingin mengatur ngx-bootstrap dalam modul yang berbeda (hanya untuk tujuan organisasi jika Anda perlu mengimpor banyak modul bs dan tidak ingin app.module Anda berantakan), Anda dapat membuat modul app-bootstrap.module.ts, impor modul Bootstrap (menggunakan forRoot ()) dan juga mendeklarasikannya di bagian ekspor (sehingga modul tersebut juga tersedia untuk modul lain).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Terakhir, jangan lupa untuk mengimpor modul bootstrap Anda di app.module.ts.

impor {AppBootstrapModule} dari './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap bekerja dengan Bootstrap 3 dan 4. Dan saya juga melakukan beberapa tes dan sebagian besar fungsionalitas juga bekerja dengan Bootstrap 2.x (ya, saya masih memiliki beberapa kode warisan untuk dipertahankan).

Semoga ini membantu seseorang!

Diuji Secara Angular 7.0.0

Langkah 1 - Instal dependensi yang diperlukan

npm install bootstrap (jika Anda menginginkan versi tertentu, harap tentukan nomor versi.)

npm install popper.js (jika Anda menginginkan versi tertentu, harap tentukan nomor versi.)

npm install jquery

Versi yang telah saya coba:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Langkah 2: Tentukan perpustakaan di bawah orderin angular.json. Di sudut terbaru, nama file config adalah angular.json bukan angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

Untuk bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Kemudian setelah ini selesai jalankan:

npm install

Sekarang. Buka file .angular-cli.json dan impor bootstrap, jquery, dan tether:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Dan sekarang. Anda siap untuk pergi.

Seperti yang saya lihat, Anda sudah mendapat banyak jawaban tetapi Anda dapat mencoba metode ini.

Praktik terbaiknya untuk tidak menggunakan jquery secara bersudut, saya lebih suka https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md metode untuk menginstal bootstrap tanpa menggunakan bootstrap js komponen yang bergantung pada jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Jaga agar kode jquery Anda bebas dalam sudut

Jalankan perintah berikut dalam proyek Anda yaitu npm install [email protected] --save

Setelah menginstal dependensi di atas, jalankan perintah npm berikut yang akan menginstal modul bootstrap npm install --save @ ng-bootstrap / ng-bootstrap

Lihat ini untuk referensi - https://github.com/ng-bootstrap/ng-bootstrap

Tambahkan impor berikut ke app.module import {NgbModule} dari '@ ng-bootstrap / ng-bootstrap'; dan tambahkan NgbModule ke impor

Di stye.css @import Anda "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Langkah 1: npm install bootstrap --save

Langkah: 2: Tempel kode di bawah ini di angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Langkah 3: ng serve

tambahkan ke angular-cli.json

   "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [ 
         "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

Ini akan berhasil, saya memeriksanya.

Jika Anda ingin menggunakan bootstrap online dan aplikasi Anda memiliki akses ke internet, Anda dapat menambahkannya

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Ke dalam file style.css utama Anda. dan itu cara paling sederhana.

Referensi: angular.io

Catatan. Solusi ini memuat bootstrap dari situs web unpkg dan perlu memiliki akses internet.

Angular 6 CLI, cukup lakukan:

ng menambahkan @ ng-bootstrap / schematics 

Untuk menginstal yang terbaru, gunakan $ npm i --save bootstrap @ next

pertama instal bootstrap dalam proyek Anda menggunakan npm npm i bootstrap setelah itu buka file style.css ur di proyek Anda dan tambahkan baris ini

@import "~bootstrap/dist/css/bootstrap.css";

dan hanya itu bootstrap yang ditambahkan dalam proyek Anda

| * | Menginstal Bootstrap 4 untuk Angular 2, 4, 5, 6 +:

| +> Instal Bootstrap dengan npm

npm install bootstrap --save

npm install popper.js --save

| +> Tambahkan gaya dan skrip ke angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Jika Anda menggunakan Angular 6+ gunakan tambahkan yang berikut ini ke angular.json :

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

Menambahkan bootsrap versi 4 saat ini ke sudut:

1 / Pertama Anda harus menginstal yang:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Kemudian tambahkan file skrip yang diperlukan ke skrip di angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Terakhir tambahkan CSS Bootstrap ke array gaya di angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],`

periksa Tautan ini

Anda bekerja dengan cdn untuk bootstrap dan jquery atau menginstal bootstarp langsung di aplikasi dengan:

npm install ngx-bootstrap --save

juga gunakan https://ng-bootstrap.github.io/#/home , tetapi ini tidak menyetujui

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a