Kami ingin menggunakan bootstrap 4 (4.0.0-alpha.2) di aplikasi kami yang dihasilkan dengan angular-cli 1.0.0-beta.5 (w / node v6.1.0).

Setelah mendapatkan bootstrap dan dependensinya dengan npm, pendekatan pertama kami adalah menambahkannya di angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

dan impor mereka di index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Ini bekerja dengan baik ng servetetapi segera setelah kami menghasilkan bangunan dengan -prodbendera semua dependensi ini menghilangdist/vendor (kejutan!).

Bagaimana kita dimaksudkan untuk menangani skenario seperti itu (mis. Memuat skrip bootstrap) dalam proyek yang dihasilkan dengan angular-cli?

Kami memiliki pemikiran berikut tetapi kami tidak benar-benar tahu ke mana harus pergi ...

• menggunakan CDN? tetapi kami lebih suka melayani file-file ini untuk menjamin bahwa mereka akan tersedia

• salin dependensi ke dist/vendorsetelah kita ng build -prod? Tapi itu sepertinya sesuatu yang harus disediakan sudut-cli karena 'merawat' bagian build?

• menambahkan jquery, bootstrap, dan tether ke dalam src/system-config.tsdan entah bagaimana menariknya ke dalam bundel kita main.ts? Tapi itu tampak salah mengingat bahwa kita tidak akan menggunakannya secara eksplisit dalam kode aplikasi kita (tidak seperti moment.js atau sesuatu seperti lodash, misalnya).

PEMBARUAN PENTING: ng2-bootstrap sekarang diganti oleh ngx-bootstrap

ngx-bootstrap mendukung Angular 3 dan 4.

Perbarui: 1.0.0-beta.11-webpack atau versi di atas

Pertama-tama periksa versi angular-cli Anda dengan perintah berikut di terminal:

ng -v

Jika versi angular-cli Anda lebih besar dari 1.0.0-beta.11-webpack , maka Anda harus mengikuti langkah-langkah ini:

1. Instal ngx-bootstrap dan bootstrap :

   npm install ngx-bootstrap bootstrap --save

Baris ini menginstal Bootstrap 3 saat ini, tetapi dapat menginstal Bootstrap 4 di masa mendatang. Perlu diingat ngx-bootstrap mendukung kedua versi.

2. Buka src / app / app.module.ts dan tambahkan:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Buka angular-cli.json (untuk angular6 dan kemudian nama file diubah menjadi angular.json ) dan masukkan entri baru ke dalam stylesarray:

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

4. Buka src / app / app.component.html dan tambahkan:

   <alert type="success">hello</alert>

Versi 1.0.0-beta.10 atau di bawah ini:

Dan, jika versi angular-cli Anda 1.0.0-beta.10 atau di bawah, maka Anda dapat menggunakan langkah-langkah di bawah ini.

Pertama, buka direktori proyek dan ketik:

npm install ngx-bootstrap --save

Kemudian, buka angular-cli-build.js Anda dan tambahkan baris ini:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Sekarang, buka src / system-config.ts Anda lalu tulis:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...dan:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Mencari kata kunci> Instalasi Perpustakaan Global di https://github.com/angular/angular-cli membantu Anda menemukan jawabannya.

Sesuai dokumen mereka, Anda dapat mengambil langkah-langkah berikut untuk menambahkan perpustakaan Bootstrap.

Pertama instal Bootstrap dari npm:

npm install bootstrap@next

Kemudian tambahkan file skrip yang diperlukan ke aplikasi [0]. Skrip dalam file angular-cli.json:

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

Terakhir, tambahkan Bootstrap CSS ke aplikasi [0] .styles array:

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

Mulai ulang servis jika Anda menjalankannya, dan Bootstrap 4 seharusnya dapat digunakan di aplikasi Anda.

Ini solusi terbaik. Tetapi jika Anda tidak memulai kembali melayani, itu tidak akan berhasil. Sangat disarankan untuk melakukan tindakan terakhir ini.

Lakukan hal berikut:

npm i bootstrap@next --save

Ini akan menambahkan bootstrap 4 ke proyek Anda.

Selanjutnya pergi ke src/style.scssatausrc/style.css berkas (pilih mana yang Anda gunakan) dan impor bootstrap ada:

Untuk style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Untuk style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Untuk skrip Anda masih harus menambahkan file dalam file angular-cli.json seperti itu ( Dalam Angular versi 6, pengeditan ini harus dilakukan dalam file angular.json ) :

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

Pada awalnya, Anda harus menginstal tether, jquery dan bootstrap dengan perintah-perintah ini

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Setelah menambahkan baris ini dalam file angular-cli.json (angular.json Anda dari versi 6 dan seterusnya)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Karena tidak ada yang merujuk pada cerita resmi (tim sudut) tentang cara memasukkan Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Sertakan Bootstrap

Bootstrap adalah kerangka kerja CSS populer yang dapat digunakan dalam proyek Angular. Panduan ini akan memandu Anda menambahkan bootstrap ke proyek Angular CLI Anda dan mengonfigurasinya untuk menggunakan bootstrap.

Menggunakan CSS

Mulai

Buat proyek baru dan arahkan ke proyek

ng new my-app
cd my-app

Menginstal Bootstrap

Dengan proyek baru yang dibuat dan siap Anda selanjutnya perlu menginstal bootstrap ke proyek Anda sebagai ketergantungan. Menggunakan --saveopsi dependensi akan disimpan di package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Mengkonfigurasi Proyek

Sekarang setelah proyek diatur, ia harus dikonfigurasikan untuk menyertakan bootstrap CSS.

• Buka file .angular-cli.jsondari root proyek Anda.
• Di bawah properti appsitem pertama dalam array itu adalah aplikasi default.
• Ada properti stylesyang memungkinkan gaya global eksternal diterapkan ke aplikasi Anda.
• Tentukan jalur ke bootstrap.min.css

Seharusnya terlihat seperti berikut ketika Anda selesai:

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

Catatan: Saat Anda melakukan perubahan, .angular-cli.jsonAnda harus mulai lagi ng serveuntuk mengambil perubahan konfigurasi.

Proyek Pengujian

Buka app.component.htmldan tambahkan markup berikut:

<button class="btn btn-primary">Test Button</button>

Dengan aplikasi yang dikonfigurasi, jalankan ng serveuntuk menjalankan aplikasi Anda dalam mode pengembangan. Di browser Anda, navigasikan ke aplikasi localhost:4200. Pastikan tombol gaya bootstrap muncul.

Menggunakan SASS

Mulai

Buat proyek baru dan arahkan ke proyek

ng new my-app --style=scss
cd my-app

Menginstal Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Mengkonfigurasi Proyek

Buat file kosong _variables.scssdi src/.

Jika Anda menggunakan bootstrap-sass, tambahkan yang berikut ke _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

Di styles.scsstambahkan yang berikut:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Proyek Pengujian

Buka app.component.htmldan tambahkan markup berikut:

<button class="btn btn-primary">Test Button</button>

Dengan aplikasi yang dikonfigurasi, jalankan ng serveuntuk menjalankan aplikasi Anda dalam mode pengembangan. Di browser Anda, navigasikan ke aplikasi localhost:4200. Pastikan tombol gaya bootstrap muncul. Untuk memastikan variabel Anda digunakan terbuka _variables.scssdan tambahkan yang berikut:

$brand-primary: red;

Kembalikan browser untuk melihat warna font berubah.

Perbarui v1.0.0-beta.26

Anda dapat melihat pada doc untuk cara baru mengimpor bootstrap di sini

Jika masih tidak berhasil, restart dengan perintah ng serve

Versi 1.0.0 atau di bawah ini:

Dalam file index.html Anda, Anda hanya perlu tautan css bootstrap (tidak perlu skrip js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Dan

npm install ng2-bootstrap --save
npm install moment --save

Setelah menginstal ng2-bootstrap di my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

Dan di my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Jangan lupa perintah ini untuk meletakkan modul Anda di vendor:

ng build

untuk mengimpor dari modul lain yang prinsipnya sama.

Saya kira metode di atas telah berubah setelah rilis, periksa tautan ini

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

memulai proyek

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

instal ng-bootstrap dan bootstrap

npm install ng2-bootstrap bootstrap --save

buka src / app / app.module.ts dan tambahkan

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

buka angular-cli.json dan masukkan entri baru ke dalam array gaya

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

buka src / app / app.component.html dan uji semua karya dengan menambahkan

<alert type="success">hello</alert>

Langkah-langkah untuk Bootstrap 4 di Angular 5

1. Buat Proyek 5 Sudut

   ng baru AngularBootstrapTest

2. Pindah ke direktori proyek

   cd AngularBootstrapTest

3. Unduh bootstrap

   npm instal bootstrap

4. Tambahkan Bootstrap ke Project

   4.1 buka .angular-cli.json

   4.2 menemukan bagian "gaya" di json

   4.3 tambahkan jalur css bootstrap seperti di bawah ini

   .

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

Sekarang Anda telah berhasil menambahkan bootstrap css di proyek sudut 5

Uji bootstrap

5. Buka src/app/app.component.html
6. tambahkan komponen tombol bootstrap

.

<button type="button" class="btn btn-primary">Primary</button>

Anda dapat merujuk gaya tombol di sini ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. simpan file

8. jalankan proyek

   ng layani --buka

Sekarang Anda akan melihat tombol gaya bootstrap di halaman

Catatan: jika Anda menambahkan jalur bootstrap setelah ng servis , Anda harus berhenti dan jalankan kembali melayani untuk mencerminkan perubahan

Karena ini menjadi sangat membingungkan dan jawaban di sini sangat beragam, saya hanya akan menyarankan pergi dengan tim ui resmi untuk BS4 repo (ya ada begitu banyak repo untuk NG-Bootstrap.

Cukup ikuti instruksi di sini https://github.com/ng-bootstrap/ng-bootstrap untuk mendapatkan BS4.

Mengutip dari lib:

Perpustakaan ini sedang dibangun dari awal oleh tim ui-bootstrap. Kami menggunakan TypeScript dan menargetkan kerangka CSS Bootstrap 4.

Seperti halnya Bootstrap 4, pustaka ini sedang dalam proses. Silakan periksa daftar masalah kami untuk melihat semua hal yang kami terapkan. Jangan ragu untuk berkomentar di sana.

Cukup salin menempelkan apa yang ada untuk itu:

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

Setelah terinstal, Anda perlu mengimpor modul utama kami:

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

Satu-satunya bagian yang tersisa adalah untuk mendaftar modul yang diimpor di modul aplikasi Anda. Metode yang tepat akan sedikit berbeda untuk modul root (tingkat atas) yang Anda harus berakhir dengan kode yang mirip dengan (perhatikan NgbModule.forRoot ()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Modul lain dalam aplikasi Anda cukup mengimpor NgbModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Ini tampaknya menjadi perilaku yang paling konsisten sejauh ini

1. Instal bootstrap

   npm install bootstrap@next

2. Tambahkan kode ke .angular-cli.json:

   "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"
   ],

3. Terakhir tambahkan bootstrap.css ke kode style.scss Anda

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

4. Mulai ulang server lokal Anda

Lakukan langkah-langkah berikut:

1. npm install --save bootstrap

2. Dan di .angular-cli.json Anda, tambahkan ke bagian gaya:

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

Setelah itu, Anda harus memulai kembali layanan Anda

Nikmati

1. Instal Bootstrap menggunakan npm

   npm install bootstrap

2. Pasang Popper.js

npm install --save popper.js

3.Goto angular.json di proyek Angular 6 / .angular-cli.json di Angular 5 dan tambahkan yang terdaftar:

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

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

Coba ini

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Anda juga dapat menonton video ini oleh Mike Brocchi yang memiliki informasi berguna tentang cara menambahkan bootstrap ke proyek yang dihasilkan Angular-Cli Anda. https://www.youtube.com/watch?v=obbdFFbjLIU (sekitar menit 13:00)

1. Jalankan di bash npm install ng2-bootstrap bootstrap --save
2. Tambahkan / Ubah berikut ini di angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Buka Terminal / command prompt di direktori proyek masing-masing dan ketik perintah berikut.

npm install --save bootstrap

Kemudian buka file .angular-cli.json, Cari

"styles": [ "styles.css" ],

ubah itu menjadi

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

Semua selesai.

Sekarang dengan versi ng-bootstrap baru 1.0.0-beta.5 mendukung sebagian besar arahan Angular asli berdasarkan markup dan CSS Bootstrap.

Satu-satunya ketergantungan yang diperlukan untuk bekerja dengan ini adalah bootstrap. Tidak Perlu menggunakan dependensi jquery dan popper.js .

ng-bootstrap adalah untuk sepenuhnya menggantikan implementasi JavaScript untuk komponen. Jadi Anda tidak perlu memasukkan bootstrap.min.jsdi bagian skrip di .angular-cli.json Anda.

ikuti langkah-langkah ini ketika Anda mengintegrasikan bootstrap dengan proyek yang dihasilkan dengan angular-cli versi terbaru.

• Inculde bootstrap.min.css di bagian .angular-cli.json Anda, styles.

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

• Instal ng-bootstrap dependensi .

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

• Tambahkan ini ke kelas modul utama Anda.

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

• Masukkan yang berikut ini di bagian impor modul utama Anda.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• Lakukan hal berikut juga di sub modul Anda jika Anda akan menggunakan komponen ng-bootstrap di dalam kelas modul tersebut.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• Sekarang proyek Anda siap menggunakan komponen ng-bootstrap yang tersedia.

1. Instal bootstrap, popper.js

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

3. Di src / styles.css , impor gaya bootstrap

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

Langkah1:
npm install bootstrap@latest --save-dev Ini akan menginstal versi terbaru dari bootstrap, Namun, versi yang ditentukan dapat diinstal dengan menambahkan nomor versi

Langkah2: Buka styles.css dan tambahkan berikut ini @import "~bootstrap/dist/css/bootstrap.css"

Untuk Menambahkan Bootstrap dan Jquery keduanya

npm install bootstrap@3 jquery --save

setelah menjalankan perintah ini, silakan dan periksa folder node_modules Anda, Anda dapat melihat bootstrap dan jquery ditambahkan ke dalamnya.

angular-clisekarang memiliki halaman wiki khusus tempat Anda dapat menemukan semua yang Anda butuhkan. TLDR, instal bootstrapvia npmdan tambahkan tautan gaya ke bagian "gaya" di .angular-cli.jsonfile Anda

Contoh kerja jika menggunakan angular-cli dan css:

1. instal bootstrap

npm instal bootstrap tether jquery --save

2. tambahkan ke .angular-cli.json

  "styles": [
    "../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"
  ],

instal boostrap menggunakan npm

npm install boostrap@next --save

kemudian periksa folder node_modules Anda untuk file boostrap.css (dalam dist) biasanya jalurnya

"../node_modules/bootstrap/dist/css/bootstrap.css",

tambahkan jalur ini | impor boostrap di dalam style.css atau style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

itu dia.

Jalankan perintah berikut ini di dalam proyek

npm install --save @bootsrap@4

dan jika Anda mendapat konfirmasi seperti ini

+ bootstrap@4.1.3
updated 1 package in 8.245s

Ini berarti boostrap 4 berhasil diinstal. Namun, untuk menggunakannya, Anda perlu memperbarui array "gaya" di bawah file angular.json.

Perbarui dengan cara berikut sehingga bootstrap akan dapat menimpa gaya yang ada

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

Untuk memastikan semuanya sudah diatur dengan benar, jalankan ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, maka Anda baik menggunakan boostrap.

Tidak melihat yang ini di sini:

@import 'bootstrap/scss/bootstrap.scss';

Saya baru saja menambahkan baris ini di style.scss Dalam kasus saya, saya juga ingin mengganti variabel bootstrap.

Jika Anda baru saja mulai dengan sudut dan bootstrap maka jawaban sederhana akan di bawah langkah-langkah berikut: 1. Tambahkan paket simpul bootstrap sebagai ketergantungan dev

npm install --save bootstrap

2. impor bootstrap stylessheet dalam file angular.json.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. dan Anda siap menggunakan bootstrap untuk penataan, kisi, dll.

   <div class="container">My first bootstrap div</div>

Bagian terbaik dari ini yang saya temukan adalah bahwa kita mengarahkan menggunakan bootstrap tanpa ketergantungan modul pihak ketiga. Kami dapat memutakhirkan bootstrap kapan saja dengan hanya memperbarui perintah, npm install --save [email protected]dll.

Anda memiliki banyak cara untuk menambahkan Bootstrap 4 di proyek Angular Anda :

• Termasuk Bootstrap CSS dan file JavaScript di bagian file index.html proyek Angular Anda dengan dan tag,

• Mengimpor file CSS Bootstrap dalam file global styles.css dari proyek Angular Anda dengan kata kunci @import.

• Menambahkan Bootstrap CSS dan file JavaScript dalam array gaya dan skrip dari file angular.json proyek Anda

Jalankan Perintah Ini

npm install bootstrap@3

Angular.json Anda

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

Anda dapat menginstal bootstrap dalam sudut menggunakan npm install bootstrapperintah.

dan setup path bootstrap berikutnya dalam angular.jsonfile dan style.cssfile.

Anda dapat membaca blog lengkap tentang cara menginstal & mengatur bootstrap di sudut, klik di sini untuk membaca blog selengkapnya tentang ini

Contoh yang berfungsi jika menggunakan angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Bekerja untuk css dan scss. Bootstrap v3 dan v4 tersedia.

Informasi lebih lanjut tentang skema bootstrap silakan temukan di sini .