Sudut 4: Bagaimana untuk memasukkan Bootstrap?

npm install --save bootstrap

setelah itu, di dalam sudut-cli.json (dalam proyek's root folder), menemukan gaya dan tambahkan file bootstrap css seperti ini:

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

UPDATE:
di sudut 6+ sudut-cli.json diubah ke sudut.json.

Menonton Video atau Ikuti langkah

Install bootstrap 4 di sudut 2 / sudut 4 / sudut 5 / sudut 6

Ada tiga cara untuk memasukkan bootstrap di proyek anda

1. Tambahkan CDN Link di index.html file
   
2. Instal bootstrap menggunakan npm dan mengatur jalan di sudut.json Fitur
   
3. Instal bootstrap menggunakan npm dan mengatur jalan di index.html file

Saya merekomendasikan anda berikut 2 metode yang diinstal bootstrap menggunakan npm karena dipasang di direktori proyek anda dan anda dapat dengan mudah mengaksesnya

Metode 1

Menambahkan Bootstrap, Jquery dan popper.js CDN jalan untuk anda sudut proyek index.html file

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. Install bootstrap menggunakan npm

npm install bootstrap --save

setelah instalasi Bootstrap 4, kita Membutuhkan dua javascript Paket Jquery dan Popper.js tanpa dua paket bootstrap adalah tidak lengkap karena Bootstrap 4 menggunakan Jquery dan popper.js paket jadi kita harus menginstal serta

2. Install JQUERY

npm install jquery --save

3. Instal Popper.js

npm install popper.js --save

Sekarang Bootstrap adalah Install pada Direktori Proyek anda di dalam node_modules Folder

terbuka sudut.json ini file yang tersedia pada anda sudut direktori buka file tersebut dan tambahkan path dari bootstrap, jquery, dan popper.js file dalam gaya[] dan script[] jalan melihat 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: Don't mengubah urutan file js itu harus seperti ini

Metode 3

Install bootstrap menggunakan npm mengikuti Metode 2 dalam metode 3 kita hanya mengatur jalan di dalam index.html file bukan sudut.json file

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

Dalam rangka untuk mengkonfigurasi/mengintegrasikan/menggunakan Bootstrap di sudut, pertama kita harus menginstal Bootstrap paket menggunakan npm.

Menginstal paket

$ npm install [email protected] --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Catatan: - menyimpan perintah akan menyelamatkan ketergantungan di sudut aplikasi dalam paket.file json.

Sekarang bahwa kita memiliki paket yang diinstal dengan langkah di atas, sekarang kita bisa tahu Sudut CLI yang dibutuhkan untuk beban gaya ini dengan menggunakan salah satu dari pilihan di bawah ini atau keduanya:

opsi 1) Menambahkan ke file src/gaya.css

kita dapat menambahkan dependensi seperti yang ditunjukkan di bawah ini:

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

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

dapat Kita tambahkan style css file ke sudut-cli.json atau sudut.file json yang di root folder dari kami app sudut seperti yang ditunjukkan di bawah ini:

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

Sudut 4 - Bootstrap / @ng-bootstrap setup

Pertama menginstal bootstrap ke dalam proyek anda menggunakan perintah di bawah ini:

npm install-menyimpan bootstrap

Kemudian tambahkan baris ini "../node_modules/bootstrap/dist/css/bootstrap.min.css" untuk sudut-cli.file json (root folder) di gaya

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

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

npm install-simpan @ng-bootstrap/ng-bootstrap

Setelah terinstal, anda perlu mengimpor modul utama.

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

Setelah ini, anda dapat menggunakan Semua Bootstrap widget (ex. korsel, modal, popovers, tooltips, tab, dll.) dan beberapa tambahan barang ( datepicker, rating, timepicker, typeahead).

Di Angular4 sebagai anda berurusan dengan *@ jenis* sistem, anda harus melakukan hal-hal berikut,

Lakukan,

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

tsconfig.json

mencari jenis array dan tambahkan jquery dan bootstrap entri,

"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 menggunakan jquery dan bootstrap keduanya.

Seperti yang satu ini akan lebih dan lebih jawaban saya'll menandai salah satu yang membantu saya:

https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project

silahkan lihat link ini https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.

ini menyediakan instruksi langkah demi langkah tentang termasuk bootstrap terbaru untuk anda sudut 4 menggunakan sudut-cli.

Jika anda menggunakan Sass/Scss, kemudian ikuti ini,

Apakah npm install

npm install bootstrap --save

dan tambahkan impor pernyataan untuk anda sass/scss file,

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

Diuji Di Sudut 7.0.0

Langkah 1 - Install dependensi yang diperlukan

npm install bootstrap (jika anda ingin versi tertentu silakan tentukan versi tidak ada.)

npm install popper.js (jika anda ingin versi tertentu silakan tentukan versi tidak ada.)

npm install jquery

Versi yang saya coba:

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

Langkah 2 : Tentukan perpustakaan di bawah pemes sudut.json. Di sudut terbaru , config file nama sudut.json bukan sudut-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"
            ]
          },

Berikut detail langkah-langkah dan contoh kerja, anda dapat mengunjungi https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Sangat detail langkah-langkah dengan penjelasan yang tepat.

Langkah-langkah: Memasang Bootstrap dari NPM

Berikutnya, kita perlu install Bootstrap. Mengubah direktori ke project yang kita buat (cd sudut-bootstrap-contoh) 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: Lokal Bootstrap CSS Sebagai alternatif, anda juga dapat men-download Bootstrap CSS dan tambahkan secara lokal untuk proyek anda. Saya donwloaded Bootstrap dari situs web dan menciptakan sebuah folder styles (tingkat yang sama sebagai gaya.css):

Catatan: Jangan tempatkan lokal file CSS di bawah folder aset. Ketika kami melakukan produksi dengan membangun Sudut CLI, file CSS dinyatakan dalam .sudut-cli.json akan minified dan semua gaya yang akan digabungkan dalam satu gaya.css. Aset folder akan disalin ke folder dist selama proses membangun (kode CSS yang akan digandakan). Hanya tempat lokal anda file CSS di bawah aset dalam kasus anda mengimpor mereka langsung di index.html.

Mengimpor CSS 1.Kami memiliki dua pilihan untuk import CSS dari Bootstrap yang diinstal dari NPM:

strong text1: Konfigurasi .sudut-cli.json:

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

2: Mengimpor langsung di src/gaya.css atau src/gaya.scss:

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

Saya pribadi lebih memilih untuk mengimpor semua gaya saya dalam src/gaya.css karena hal itu telah dinyatakan dalam .sudut-cli.json sudah.

3.1 Alternatif: Lokal Bootstrap CSS Jika anda menambahkan file Bootstrap CSS lokal, hanya impor dalam .sudut-cli.json

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

atau src/gaya.css

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

4: Bootstrap JavaScript Komponen dengan ngx-bootstrap (Opsi 1) Dalam kasus anda tidak perlu menggunakan Bootstrap JavaScript komponen (yang memerlukan JQuery), ini semua setup yang anda butuhkan. Tapi jika anda perlu untuk menggunakan modals, akordeon, datepicker, tooltips atau komponen lain, bagaimana kita dapat menggunakan komponen ini tanpa memasang jQuery?

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

npm install ngx-bootstrap --save

Catatanng2-bootstrap dan ngx-bootstrap adalah paket yang sama. ng2-bootstrap berganti nama menjadi ngx-bootstrap setelah #itsJustAngular.

Dalam kasus anda ingin menginstal Bootstrap dan ngx-bootstrap pada saat yang sama ketika anda membuat Sudut CLI proyek:

npm install bootstrap ngx-bootstrap --save

4.1: Menambahkan Bootstrap diperlukan modul-modul dalam aplikasi.modul.ts

Pergi melalui ngx-bootstrap dan menambahkan modul-modul yang diperlukan dalam aplikasi anda.modul.ts. Sebagai contoh, misalkan kita ingin menggunakan Dropdown, Tooltip, dan Modal komponen:

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 panggil .forRoot() metode untuk masing-masing modul (karena ngx-bootstrap penyedia modul), fungsi ini akan tersedia di semua komponen dan modul proyek anda (lingkup global).

Sebagai alternatif, jika anda ingin mengatur ngx-bootstrap dalam modul yang berbeda (hanya untuk tujuan organisasi dalam kasus anda perlu untuk mengimpor banyak bs modul dan jangan ingin kekacauan aplikasi anda.modul), anda dapat membuat modul aplikasi-bootstrap.modul.ts, import Bootstrap modul (menggunakan forRoot()) dan juga menyatakan mereka di bagian ekspor (sehingga mereka menjadi tersedia untuk modul lain juga).

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 {}

Akhirnya, jangan lupa untuk mengimpor bootstrap modul dalam aplikasi anda.modul.ts.

impor { AppBootstrapModule } dari './aplikasi-bootstrap/aplikasi-bootstrap.modul';

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

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

Semoga ini bisa membantu seseorang!

Untuk bootstrap 4.0.0-alph.6

npm install [email protected] jquery tether --save

Kemudian setelah hal ini dilakukan dengan menjalankan:

npm install

Sekarang. Terbuka .sudut-cli.json file dan import bootstrap, jquery, dan menambatkan:

"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.

Jalankan perintah berikut di proyek saya.e npm install [email protected] -simpan

Setelah menginstal di atas ketergantungan jalankan berikut npm perintah yang akan memasang bootstrap modul npm install-simpan @ng-bootstrap/ng-bootstrap

Check this out untuk referensi - https://github.com/ng-bootstrap/ng-bootstrap

Tambahkan kode berikut ini di impor ke app.modul impor {NgbModule} dari '@ng-bootstrap/ng-bootstrap'; dan menambahkan NgbModule untuk impor

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

Seperti yang saya lihat anda sudah punya banyak jawaban, tetapi anda dapat mencoba metode ini .

Untuk praktek terbaik untuk tidak menggunakan jquery di sudut, saya lebih suka https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md metode untuk menginstal tanpa menggunakan bootstrap bootstrap js komponen yang tergantung pada jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Menjaga kode jquery gratis di sudut

Langkah 1 : npm install bootstrap --save

Langkah : 2 : Paste kode di bawah ini di sudut.json node_modules/bootstrap/dist/css/bootstrap.min.css

Langkah 3 : ng melayani

pertama install bootstrap di proyek anda menggunakan npm npm saya bootstrap setelah itu buka ur gaya.file css dalam proyek anda dan tambahkan baris ini

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

dan yang's itu bootstrap ditambahkan dalam proyek anda

Jika anda ingin menggunakan bootstrap online dan aplikasi anda memiliki akses ke internet, anda dapat menambahkan

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

Ke anda'r gaya utama.file css. dan cara paling sederhana.

Referensi : sudut.io

Catatan. Solusi ini beban bootstrap dari unpkg website dan itu perlu untuk memiliki akses internet.

Untuk menginstal terbaru menggunakan $ npm aku-menyimpan bootstrap@berikutnya

Sudut 6 CLI, lakukan:

ng add @ng-bootstrap/skema

tambahkan ke sudut-cli.json

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

Itu akan bekerja, aku memeriksa itu.

|*| Memasang Bootstrap 4 untuk Sudut 2, 4, 5, 6 + :

|+> Install Bootstrap dengan npm

npm install bootstrap --save

npm install popper.js --save

|+> Menambahkan gaya dan script untuk sudut.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"
    ]
    ...
}]