Chcemy używać bootstrap 4 (4.0.0-alpha.2) w naszej aplikacji wygenerowanej z angular-cli 1.0.0-beta.5 (w / node v6.1.0).

Po uzyskaniu bootstrapu i jego zależności z npm, nasze pierwsze podejście polegało na dodaniu ich do angular-cli-build.js:

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

i importuj je do naszego 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>

Działa to dobrze, ng serveale gdy tylko stworzyliśmy kompilację z -prodflagą, wszystkie te zależności zniknęły dist/vendor(niespodzianka!).

Jak mamy obsłużyć taki scenariusz (np. Ładowanie skryptów bootstrap) w projekcie wygenerowanym za pomocą angular-cli?

Mieliśmy następujące przemyślenia, ale tak naprawdę nie wiemy, którą drogą wybrać ...

• użyć CDN? ale wolelibyśmy udostępnić te pliki, aby zagwarantować, że będą one dostępne

• skopiować zależności do dist/vendorpo naszym ng build -prod? Ale wydaje się, że powinno to zapewnić coś kątowego, ponieważ „dba” o część kompilacji?

• dodajesz jquery, bootstrap i tether src/system-config.tsi jakoś wciągasz je do naszego pakietu main.ts? Ale wydawało się to niewłaściwe, biorąc pod uwagę, że nie będziemy ich jawnie wykorzystywać w kodzie naszej aplikacji (na przykład moment.js lub coś w rodzaju lodash).

WAŻNA AKTUALIZACJA: ng2-bootstrap jest teraz zastępowany przez ngx-bootstrap

ngx-bootstrap obsługuje zarówno Angular 3, jak i 4.

Aktualizacja: 1.0.0-beta.11-webpack lub nowsze wersje

Przede wszystkim sprawdź wersję kątową-cli za pomocą następującego polecenia w terminalu:

ng -v

Jeśli twoja wersja kątowa-cli jest większa niż 1.0.0-beta.11-webpack , powinieneś wykonać następujące kroki:

1. Zainstaluj ngx-bootstrap i bootstrap :

   npm install ngx-bootstrap bootstrap --save

Ta linia instaluje obecnie Bootstrap 3, ale może zainstalować Bootstrap 4 w przyszłości. Pamiętaj, że ngx-bootstrap obsługuje obie wersje.

2. Otwórz src / app / app.module.ts i dodaj:

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

3. Otwórz plik angular-cli.json (dla nazwy pliku angular6 i nowszej zmieniono na angular.json ) i wstaw nowy wpis do stylestablicy:

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

4. Otwórz src / app / app.component.html i dodaj:

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

1.0.0-beta.10 lub nowsze wersje:

A jeśli twoja wersja kątowa-cli to 1.0.0-beta.10 lub niższa, możesz użyć poniższych kroków.

Najpierw przejdź do katalogu projektu i wpisz:

npm install ngx-bootstrap --save

Następnie otwórz plik angular-cli-build.js i dodaj następujący wiersz:

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

Teraz otwórz plik src / system-config.ts, a następnie napisz:

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

...i:

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

Wyszukiwanie słowa kluczowego> Instalacja globalnej biblioteki na https://github.com/angular/angular-cli pomaga znaleźć odpowiedź.

Zgodnie z ich dokumentem możesz wykonać następujące kroki, aby dodać bibliotekę Bootstrap.

Najpierw zainstaluj Bootstrap z npm:

npm install bootstrap@next

Następnie dodaj potrzebne pliki skryptów do aplikacji [0] .scripts w pliku angular-cli.json:

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

Na koniec dodaj Bootstrap CSS do tablicy aplikacji [0] .styles:

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

Uruchom ponownie serw, jeśli go uruchomisz, a Bootstrap 4 powinien działać w Twojej aplikacji.

To najlepsze rozwiązanie. Ale jeśli nie uruchomisz ponownie serwowania, to nigdy nie zadziała. Zdecydowanie zaleca się wykonanie tej ostatniej czynności.

Wykonaj następujące czynności:

npm i bootstrap@next --save

Spowoduje to dodanie bootstrap 4 do twojego projektu.

Następnie przejdź do pliku src/style.scsslub src/style.csspliku (wybierz cokolwiek, którego używasz) i zaimportuj tam bootstrap:

Dla 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";

Dla style.scss

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

W przypadku skryptów nadal będziesz musiał dodać plik w pliku angular-cli.json w taki sposób (w wersji Angular 6 ta edycja musi zostać wykonana w pliku angular.json ) :

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

Najpierw musisz zainstalować tether, jquery i bootstrap za pomocą tych poleceń

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

Po dodaniu tych wierszy w pliku angular-cli.json (angular.json od wersji 6 i nowszych)

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

Ponieważ nikt nie odniósł się do oficjalnej historii (zespół angular-cli), w jaki sposób włączyć Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Uwzględnij Bootstrap

Bootstrap to popularny framework CSS, którego można używać w projekcie Angular. Ten przewodnik przeprowadzi Cię przez proces dodawania bootstrap do projektu Angular CLI i konfigurowania go do używania bootstrap.

Korzystanie z CSS

Pierwsze kroki

Utwórz nowy projekt i przejdź do niego

ng new my-app
cd my-app

Instalowanie Bootstrap

Po utworzeniu nowego projektu i jego przygotowaniu będziesz musiał zainstalować bootstrap w swoim projekcie jako zależność. Za pomocą --saveopcji zależność zostanie zapisana w pliku package.json

# version 3.x
npm install bootstrap --save

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

Konfigurowanie projektu

Po skonfigurowaniu projektu należy go skonfigurować tak, aby obejmował CSS ładowania początkowego.

• Otwórz plik .angular-cli.jsonz katalogu głównego swojego projektu.
• appsPierwszą pozycją w tej tablicy pod właściwością jest aplikacja domyślna.
• Istnieje właściwość, stylesktóra umożliwia zastosowanie zewnętrznych stylów globalnych do aplikacji.
• Podaj ścieżkę do bootstrap.min.css

Po zakończeniu powinno to wyglądać następująco:

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

Uwaga: po wprowadzeniu zmian .angular-cli.jsonkonieczne będzie ponowne uruchomienie w ng servecelu pobrania zmian konfiguracji.

Projekt testowy

Otwórz app.component.htmli dodaj następujące znaczniki:

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

Po skonfigurowaniu aplikacji uruchom ją, ng serveaby uruchomić aplikację w trybie programowania. W przeglądarce przejdź do aplikacji localhost:4200. Sprawdź, czy pojawi się przycisk w stylu bootstrap.

Korzystanie z SASS

Pierwsze kroki

Utwórz nowy projekt i przejdź do niego

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

Instalowanie Bootstrap

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

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

Konfigurowanie projektu

Utwórz pusty plik _variables.scssw src/.

Jeśli używasz bootstrap-sass, dodaj następujące elementy do _variables.scss:

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

Na styles.scssdodatek, co następuje:

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

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

Projekt testowy

Otwórz app.component.htmli dodaj następujące znaczniki:

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

Po skonfigurowaniu aplikacji uruchom ją, ng serveaby uruchomić aplikację w trybie programowania. W przeglądarce przejdź do aplikacji localhost:4200. Sprawdź, czy pojawi się przycisk w stylu bootstrap. Aby upewnić się, że używane są zmienne, otwórz _variables.scssi dodaj:

$brand-primary: red;

Wróć do przeglądarki, aby zobaczyć zmianę koloru czcionki.

Zaktualizuj v1.0.0-beta.26

W dokumencie możesz zobaczyć nowy sposób importowania bootstrap tutaj

Jeśli nadal nie działa, uruchom ponownie za pomocą polecenia ng serve

1.0.0 lub niższe wersje:

W pliku index.html potrzebujesz tylko linku rozruchowego css (nie potrzebujesz skryptów js)

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

I

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

Po zainstalowaniu ng2-bootstrap w 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'
  }
};

A w my_project / angular-cli-build.js:

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

Nie zapomnij tego polecenia, aby umieścić moduł w dostawcy:

ng build

importować z innego modułu, który jest tą samą zasadą.

Myślę, że powyższe metody zmieniły się po wydaniu, sprawdź ten link

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

zainicjować projekt

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

zainstaluj ng-bootstrap i bootstrap

npm install ng2-bootstrap bootstrap --save

otwórz src / app / app.module.ts i dodaj

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

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

otwórz plik angular-cli.json i wstaw nowy wpis do tablicy stylów

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

otwórz src / app / app.component.html i przetestuj wszystkie prace, dodając

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

Kroki dla Bootstrap 4 w Angular 5

1. Utwórz projekt Angular 5

   nowego AngularBootstrapTest

2. Przejdź do katalogu projektu

   cd AngularBootstrapTest

3. Pobierz bootstrap

   npm zainstaluj bootstrap

4. Dodaj Bootstrap do projektu

   4.1 Otwórz plik .angular-cli.json

   4.2 znajdź sekcję „style” w Json

   4.3 dodaj ścieżkę css ładowania początkowego, jak poniżej

   .

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

Teraz pomyślnie dodałeś bootstrap css w projekcie angular 5

Przetestuj bootstrap

5. otwarty src/app/app.component.html
6. dodaj składnik przycisku ładowania początkowego

.

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

możesz odnieść się do stylów przycisków tutaj ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. Zapisz plik

8. uruchomić projekt

   ng służyć - otwierają

Teraz zobaczysz przycisk stylu ładowania na stronie

Uwaga: jeśli dodałeś ścieżkę ładowania początkowego po ng serv , musisz zatrzymać i ponownie uruchomić ng ng, aby odzwierciedlić zmiany

Ponieważ stało się to tak mylące, a odpowiedzi tutaj są całkowicie mieszane, po prostu zasugeruję pójście z oficjalnym zespołem interfejsu użytkownika dla repozytorium BS4 (tak, istnieje wiele takich repozytoriów dla NG-Bootstrap.

Wystarczy postępować zgodnie z instrukcjami tutaj https://github.com/ng-bootstrap/ng-bootstrap, aby uzyskać BS4.

Cytowanie z biblioteki lib:

Ta biblioteka jest budowana od podstaw przez zespół interfejsu użytkownika. Używamy TypeScript i celujemy w środowisko Bootstrap 4 CSS.

Podobnie jak w przypadku Bootstrap 4, ta biblioteka jest w toku. Sprawdź naszą listę problemów, aby zobaczyć wszystkie rzeczy, które wdrażamy. Możesz tam dodawać komentarze.

Po prostu skopiuj wklejanie tego, co jest ze względu na to:

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

Po zainstalowaniu musisz zaimportować nasz główny moduł:

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

Jedyną pozostałą częścią jest wyświetlenie listy importowanego modułu w module aplikacji. Dokładna metoda będzie nieco inna dla modułu root (najwyższego poziomu), dla którego powinieneś otrzymać kod podobny do (zauważ NgbModule.forRoot ()):

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

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

Inne moduły w twojej aplikacji mogą po prostu zaimportować NgbModule:

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

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

To zdecydowanie najbardziej spójne zachowanie

1. Zainstaluj bootstrap

   npm install bootstrap@next

2. Dodaj kod do pliku .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. Ostatnio dodaj bootstrap.css do kodu style.scss

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

4. Uruchom ponownie serwer lokalny

Wykonaj następujące czynności:

1. npm install --save bootstrap

2. A w pliku .angular-cli.json dodaj do sekcji stylów:

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

Następnie musisz ponownie uruchomić serwer ng

Cieszyć się

1. Zainstaluj Bootstrap za pomocą npm

   npm install bootstrap

2. Zainstaluj Popper.js

npm install --save popper.js

3. Przejdź do angular.json w Angular 6 project / .angular-cli.json w Angular 5 i dodaj wymienione:

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

Spróbuj tego

npm install bootstrap@next

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

Możesz także obejrzeć ten film Mike'a Brocchi, który zawiera przydatne informacje na temat dodawania bootstrap do projektu generowanego przez Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (około minut 13:00)

1. Uruchom w bash npm install ng2-bootstrap bootstrap --save
2. Dodaj / zmień następujące w 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" ],

Otwórz Terminal / wiersz poleceń w odpowiednim katalogu projektu i wpisz następujące polecenie.

npm install --save bootstrap

Następnie otwórz plik .angular-cli.json, poszukaj

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

zmień to na

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

Wszystko gotowe.

Teraz z nową wersją ng-bootstrap 1.0.0-beta.5 obsługuje większość natywnych dyrektyw Angular opartych na znacznikach Bootstrap i CSS.

Jedyną zależnością wymaganą do pracy z tym jest bootstrap. Nie trzeba używać zależności jquery i popper.js .

ng-bootstrap ma całkowicie zastąpić implementację JavaScript dla komponentów. Więc nie musisz dołączać bootstrap.min.jsdo sekcji skryptów w pliku .angular-cli.json.

wykonaj poniższe kroki, gdy integrujesz bootstrap z wygenerowanym projektem z najnowszą wersją angular-cli.

• Dodaj bootstrap.min.csssekcję stylów do pliku .angular-cli.json.

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

• Zainstaluj zależność ng-bootstrap .

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

• Dodaj to do swojej głównej klasy modułu.

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

• Uwzględnij następujące elementy w głównej sekcji modułu importu.

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

• Wykonaj następujące czynności również w swoich modułach podrzędnych, jeśli zamierzasz używać komponentów ng-bootstrap w tych klasach modułów.

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

• Teraz twój projekt jest gotowy do użycia dostępnych komponentów ng-bootstrap.

1. Zainstaluj bootstrap, popper.js

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

3. W src / styles.css zaimportuj styl bootstrap

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

Krok 1:
npm install bootstrap@latest --save-dev Spowoduje to zainstalowanie najnowszej wersji programu ładującego, jednak określoną wersję można zainstalować, dodając numer wersji

Krok 2: Otwórz styles.css i dodaj następujące @import "~bootstrap/dist/css/bootstrap.css"

Do dodawania Bootstrap i Jquery

npm install bootstrap@3 jquery --save

po uruchomieniu tego polecenia przejdź do folderu node_modules, aby zobaczyć, jak dodano do niego bootstrap i jquery.

angular-clima teraz dedykowaną stronę wiki, na której możesz znaleźć wszystko, czego potrzebujesz. TLDR, zainstaluj bootstrapza pomocą npmi dodaj link styli do sekcji „styli” w swoim .angular-cli.jsonpliku

Przykład roboczy w przypadku użycia angular-cli i css:

1. zainstaluj bootstrap

npm install bootstrap tether jquery --save

2. dodaj do .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"
  ],

zainstaluj boostrap przy użyciu npm

npm install boostrap@next --save

następnie sprawdź, czy w folderze node_modules nie ma pliku boostrap.css (w folderze dist), normalnie jest to ścieżka

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

dodaj tę ścieżkę | importuj boostrap w style.css lub style.scss

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

Otóż ​​to.

Uruchom następujące polecenie w projekcie

npm install --save @bootsrap@4

a jeśli otrzymasz takie potwierdzenie

+ bootstrap@4.1.3
updated 1 package in 8.245s

Oznacza to, że boostrap 4 został pomyślnie zainstalowany. Jednak aby go użyć, musisz zaktualizować tablicę „stylów” w pliku angular.json.

Zaktualizuj go w następujący sposób, aby bootstrap mógł zastąpić istniejące style

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

Aby upewnić się, że wszystko jest poprawnie skonfigurowane, uruchom 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, a następnie możesz użyć boostrap.

Nie widziałem tego tutaj:

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

Właśnie dodałem tę linię do style.scss W moim przypadku chciałem również zastąpić zmienne bootstrap.

Jeśli dopiero zaczynasz z angular i bootstrap, prosta odpowiedź będzie poniżej: 1. Dodaj pakiet węzłów bootstrap jako zależność dev

npm install --save bootstrap

2. zaimportuj arkusz stylów ładowania początkowego do pliku angular.json.

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

3. i jesteś gotowy do użycia bootstrapu do stylizacji, siatki itp.

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

Najlepszą częścią tego, co znalazłem, było to, że kierujemy za pomocą bootstrap bez zależności modułów zewnętrznych. Możemy zaktualizować bootstrap w dowolnym momencie, po prostu aktualizując polecenie npm install --save bootstrap@4.4itp.

Istnieje wiele sposobów dodania Bootstrap 4 do projektu Angular :

• Uwzględniając pliki CSS i JavaScript programu Bootstrap w sekcji pliku index.html projektu Angular ze znacznikami i,

• Importowanie pliku Bootstrap CSS do globalnego pliku styles.css projektu Angular ze słowem kluczowym @import.

• Dodawanie plików CSS i JavaScript Bootstrap do tablic stylów i skryptów pliku angular.json twojego projektu

Uruchom to polecenie

npm install bootstrap@3

twój Angular.json

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

możesz zainstalować bootstrap w wersji kątowej za pomocą npm install bootstrappolecenia.

i następna ścieżka instalacyjna bootstrap w angular.jsonpliku i style.csspliku.

możesz przeczytać pełny blog o tym, jak zainstalować i skonfigurować bootstrap w systemie kątowym, kliknij tutaj, aby przeczytać pełny blog na ten temat

Przykład roboczy w przypadku użycia kątowego-cli:

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

Działa dla css i scss. Bootstrap v3 i v4 są dostępne.

Więcej informacji na temat schematów bootstrap można znaleźć tutaj .