Jak dodać bootstrap do projektu angular-cli

234

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

Jerome
źródło
Czy masz je w pliku system-config.ts? musisz je zmapować.
mjwrazor
1
Wiele poniższych odpowiedzi zaleca użycie ngx-bootstrap. Odkryłem, że nie jest to pełny zamiennik wtyczek jquery Bootstrap i czasami nadal trzeba używać tych „rodzimych” wtyczek jquery, takich jak funkcja zwijania w tabelach. W takim przypadku poszukaj jednej z poniższych odpowiedzi wyjaśniających, jak jawnie zaimportować skrypt jquery z pliku .angular-cli.json.
Christoph
Wystarczy użyć ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Odpowiedzi:

299

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.

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

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
  2. 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"
    ],
  3. 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'
  }
};
pd farhad
źródło
6
Czym dokładnie jest ng2-bootstrap. co oznacza dodanie natywnego bootstrapu do angular 2? Przepraszam, jestem zdezorientowany i sprawdziłem to, ale nadal jestem zdezorientowany. dlaczego nie mogę wykonać tych samych kroków, aby pobrać bootstrap zamiast korzystać z ng2-bootstrap innej firmy.
mjwrazor
1
@ mjwrazor to dlatego, że bootstrap to nie tylko style. to frameworki. dla jasności sprawdź za pomocą komponentu oceniającego z ng2-bootstrap i pomyśl o kodach, które napiszesz, aby go zaimplementować.
Ali Ghanavatian
5
Mała uwaga dla przyszłych czytelników: Angular CLI przeszedł z SystemJS na WebPack z wersją beta.14. Ta odpowiedź jest teraz nieaktualna, ponieważ zapewnia rozwiązanie oparte na SystemJS.
jbandi
2
Dzięki za pomysł użycia ng2-bootstrap, tutaj znalazłem instrukcję instalacji dla kątowego cli, na stronie github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… W moim przypadku brakowało wywołania AlertModule.forRoot () podczas importu.
bruno.bologna
1
Miałem ten sam problem z [email protected]& [email protected]. Postępując zgodnie z tymi krokami, z tą różnicą, że app.module.tsnie odnoszę się do ngx-bootstrap przez „ngx-bootstrap / ngx-bootstrap”, ale przez „ngx-bootstrap”, jak na tym przykładzie w github, napraw mój problem.
Edmond
123

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.

Nelly Sattari
źródło
2
Jak piszę, jest to jedyne rozwiązanie, które wydaje się korzystać z najnowszej wersji angular-cli.
freethebees
1
Bootstrap.js z pewnością NIE jest potrzebny! Ponieważ nie chcesz używać juqery bootstrap.js do tego celu, musisz zainstalować dyrektywy ng2 bootstrap.
Pascal,
2
Jeśli chciałbyś użyć javascript bootstrap zamiast tylko .css, musisz również uwzględnić jego zależności w tablicy skryptów: „../node_modules/jquery/dist/jquery.slim.js”, „../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Howard Swope
2
Lepiej użyj bootstrap.bundle.js w deklaracji skryptów, która ma również popper.js.
Dejazmach,
1
Aby praca nie przeoczyła ostatniego punktu, wykonaj ng serveponownie. Również dlaczego Angular CLI nie może dodać tego automatycznie? Byłoby dobrze, gdybyśmy mieli taką opcję.
shaijut
58

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"
],
mahatmanich
źródło
5
IMHO jest to również świetna opcja, szczególnie w najnowszych wersjach angular-cli. Ogromną zaletą jest to, że ta metoda nie zależy od osób aktualizujących bibliotekę z pakietu npm wymienionego w zaakceptowanej odpowiedzi; co więcej, pozwala nam to również na przesłonięcie zmiennych bootstrap za pomocą SASS, bez bezpośredniego wskazywania na skompilowane pliki CSS.
martin
2
Tak, jest czystszy i bardziej modułowy, dlatego wolę!
mahatmanich,
Ta decyzja działa dla mnie, wszelkie wymagania wstępne do spełnienia, używam najnowszej wersji Angular i Bootstrap i dodałem wszystkie powyższe zmiany, nie działałem w ten sposób, ale pracowałem nad dodaniem <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> in index.html
har_shit
To używa konfiguracji cli!
mahatmanich,
7
czystszą metodą byłoby @import '~ bootstrap / dist / css / bootstrap'; Używanie znaku ~ do importowania jak moduł bezpośrednio z folderu node_modules. Znalazłem wyjaśnienie tutaj: stackoverflow.com/questions/39535760/…
AI
32

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"
  ]
Alberto Viezzi
źródło
2
miałeś na myśli $ projectRoot / .angular-cli.json?
21

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.

tilo
źródło
4
To rozwiązanie nie dodaje plików javascript do bootstrap, tylko css
Robin van der Knaap
Zobacz inną historię: github.com/angular/angular-cli/wiki/stories-global-lib . Opisuje dodawanie plików skryptowych, biorąc przykład bootstrap 4.
Robin van der Knaap
$brand-primary: red;nie działało dla mnie. Jednak $primary: red;tak się stało!
Johan Frick
Dziękujemy za wyjaśnienie różnicy między bootstrap a boostrap @ next :-)
Venkatesh Muniyandi
17

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

Shigiang Liu
źródło
1
jak to sprawia, że ​​bootstrap może korzystać z jquery? Zrobiłem to i to nie działa.
mjwrazor
przykład w końcu to znalazł i zadziałało. Przez jakiś czas nie mogłem tego rozgryźć.
mjwrazor
8

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>
shakram02
źródło
1
Metoda z Ahmeda Hamdy'ego działa, najwyraźniej teraz nastąpiła aktualizacja kodu. Zaktualizowałem jego wiadomość o rozwiązanie.
PeterH
1
jeśli chcesz użyć Bootstrap 4, musisz zmienić „npm install ng2-bootstrap bootstrap - zapisz„ TO BE ”npm install ng2-bootstrap [email protected] --save” .... nie do końca oczywiste w dokumentacji (wyszukaj hasło „card-” w bootstrap.css, aby sprawdzić, czy zadziałało) ... zwróć uwagę, że jest to obecnie Alpha 6, to się bez wątpienia zmieni ... sprawdź stronę bootstrap, by sprawdzić aktualną instrukcję npm
72GM
8

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

  1. otwarty src/app/app.component.html
  2. 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/ )

  1. Zapisz plik

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

rashidnk
źródło
6

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

Jimmy Kane
źródło
6
  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

Xjw919
źródło
Chociaż ngx-bootstrap jest miły dla obsługiwanych przez niego komponentów, czasem nadal trzeba używać „rodzimych” wtyczek jquery, takich jak funkcja zwijania w tabelach. Następnie nadal musisz jawnie zaimportować skrypt jquery, który pokazuje ta odpowiedź.
Christoph
Upvoted dla punktu 4 (Uruchom ponownie serwer lokalny) Używam ---> npm install ngx-bootstrap bootstrap --save
Palanikumar
5

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ę

Léger Djiba
źródło
4
  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"
        ]
Konvivial
źródło
2

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)

Nelly Sattari
źródło
2
  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" ],
śrijiszki
źródło
2

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.

Raj Sahoo
źródło
2

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.

JLS
źródło
2
  1. Zainstaluj bootstrap, popper.js

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

  1. W src / styles.css zaimportuj styl bootstrap

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

FEUJIO Marie Therese
źródło
2

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"

kireeti9
źródło
Głównie obecna najlepsza odpowiedź oprócz usuń --save-dev. Jak chcesz, aby bootstrap był wdrażany z Twoją aplikacją.
Sydwell
2

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.

Alexander Zaldostanov
źródło
Fajne dodawanie Jquery również.
Surya R Praveen
1

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

Claudiu Constantin
źródło
1

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"
  ],
ilia
źródło
1

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.

Chanaka Fernando
źródło
Co z umieszczeniem go w tablicy stylów angular-cli.json? Nie jest konieczne?
CodyBugstein
Nie, to nie jest konieczne. ponieważ do tej tablicy dołączamy nasz plik style.css. możemy importować inne pliki css w naszym style.css lub style.scss „@import” ~@angular/material/prebuilt-themes/indigo-pink.css ”;„ @import ”../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando
Ach ok .. ale myślę, że włączenie angular-cli.jsonjest prawdopodobnie lepsze
CodyBugstein
@CodyBugstein Nie jestem pewien, czy dodawanie go do pliku .angular-cli.json jest koniecznie „lepsze”. Oto kilka powodów, dla których możesz chcieć dodać import do pliku styles.scss: 1) Możesz łatwo zastosować motyw bootstrap, taki jak przykład Bootswatch tutaj: github.com/thomaspark/bootswatch 2) Edycja plików .json jest bardziej skomplikowana niż edytowanie plików .scss, ponieważ pliki .json nie pozwalają na komentarze, oraz 3) nowi programiści mogą spojrzeć na styles.scss jako punkt wyjścia dla wszystkich CSS, a nie .angular-cli.json.
Keith,
1

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. wprowadź opis zdjęcia tutaj

Tadele Ayelegn
źródło
1

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.

Andris
źródło
1

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

  2. 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 [email protected]itp.

ichbinpradnya
źródło
1

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

Farid Rajab
źródło
1

Uruchom to polecenie

npm install bootstrap@3

twój Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
Vikas Katariya
źródło
1

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

bhavesh ajani
źródło
0

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 .

Słupek
źródło