Vogliamo usare bootstrap 4 (4.0.0-alpha.2) nella nostra app generata con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).

Dopo aver ottenuto bootstrap e le sue dipendenze con npm, il nostro primo approccio consisteva nell'aggiungerle in angular-cli-build.js:

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

e importali nel nostro 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>

Questo ha funzionato bene ng servema non appena abbiamo prodotto un build con -prodflag tutte queste dipendenze sono scomparse dist/vendor(sorpresa!).

In che modo intendiamo gestire tale scenario (ovvero caricare gli script bootstrap) in un progetto generato con angular-cli?

Abbiamo avuto i seguenti pensieri ma non sappiamo davvero quale strada fare ...

• usare un CDN? ma preferiremmo servire questi file per garantire che saranno disponibili

• copiare le dipendenze dist/vendordopo il nostro ng build -prod? Ma sembra che qualcosa dovrebbe fornire angular-cli dal momento che "si prende cura" della parte di costruzione?

• aggiungendo jquery, bootstrap e tether in src/system-config.tse in qualche modo inserirli nel nostro bundle main.ts? Ma sembrava sbagliato considerando che non li useremo esplicitamente nel codice della nostra applicazione (a differenza di moment.js o qualcosa come lodash, per esempio).

AGGIORNAMENTO IMPORTANTE: ng2-bootstrap è ora sostituito da ngx-bootstrap

ngx-bootstrap supporta sia Angular 3 che 4.

Aggiornamento: 1.0.0-beta.11-webpack o versioni successive

Prima di tutto controlla la tua versione angolare-cli con il seguente comando nel terminale:

ng -v

Se la versione di angular -cli è maggiore di 1.0.0-beta.11-webpack , è necessario seguire questi passaggi:

1. Installa ngx-bootstrap e bootstrap :

   npm install ngx-bootstrap bootstrap --save

Questa linea installa Bootstrap 3 al giorno d'oggi, ma può installare Bootstrap 4 in futuro. Tieni presente che ngx-bootstrap supporta entrambe le versioni.

2. Apri src / app / app.module.ts e aggiungi:

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

3. Aprire angular-cli.json (per angular6 e il nome del file successivo modificato in angular.json ) e inserire una nuova voce stylesnell'array:

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

4. Apri src / app / app.component.html e aggiungi:

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

1.0.0-beta.10 o versioni precedenti:

E, se la tua versione angular -cli è 1.0.0-beta.10 o precedente, puoi usare i passaggi seguenti.

Innanzitutto, vai alla directory del progetto e digita:

npm install ngx-bootstrap --save

Quindi, apri angular-cli-build.js e aggiungi questa riga:

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

Ora apri il tuo src / system-config.ts quindi scrivi:

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

...e:

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

Cercare la parola chiave> Installazione della biblioteca globale su https://github.com/angular/angular-cli ti aiuta a trovare la risposta.

Come da loro documento, puoi aggiungere i seguenti passi per aggiungere la libreria Bootstrap.

Prima installa Bootstrap da npm:

npm install bootstrap@next

Quindi aggiungi i file di script necessari a apps [0] .scripts nel file angular-cli.json:

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

Infine aggiungi il Bootstrap CSS all'array apps [0] .styles:

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

Riavvia il servizio se lo stai eseguendo e Bootstrap 4 dovrebbe funzionare sulla tua app.

Questa è la soluzione migliore. Ma se non riavvii ng serve non funziona mai. Si consiglia vivamente di eseguire quest'ultima azione.

Eseguire le seguenti operazioni:

npm i bootstrap@next --save

Questo aggiungerà bootstrap 4 al tuo progetto.

Quindi vai al tuo src/style.scsso al src/style.cssfile (scegli quello che stai usando) e importa bootstrap lì:

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

Per style.scss

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

Per gli script dovrai comunque aggiungere il file nel file angular-cli.json in questo modo ( nella versione 6 di Angular, questa modifica deve essere eseguita nel file angular.json ) :

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

All'inizio, devi installare tether, jquery e bootstrap con questi comandi

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

Dopo aggiungere queste righe nel file angular-cli.json (angular.json dalla versione 6 in poi)

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

Dal momento che nessuno ha fatto riferimento alla storia ufficiale (squadra angular-cli) su come includere Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Includi Bootstrap

Bootstrap è un popolare framework CSS che può essere utilizzato all'interno di un progetto angolare. Questa guida ti guiderà attraverso l'aggiunta di bootstrap al tuo progetto CLI angolare e la sua configurazione per l'utilizzo di bootstrap.

Utilizzando CSS

Iniziare

Crea un nuovo progetto e naviga nel progetto

ng new my-app
cd my-app

Installazione di Bootstrap

Con il nuovo progetto creato e pronto, dovrai successivamente installare bootstrap sul tuo progetto come dipendenza. Usando l' --saveopzione la dipendenza verrà salvata in package.json

# version 3.x
npm install bootstrap --save

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

Configurazione del progetto

Ora che il progetto è impostato, deve essere configurato per includere il CSS bootstrap.

• Apri il file .angular-cli.jsondalla radice del tuo progetto.
• Sotto la proprietà appsil primo elemento in quell'array è l'applicazione predefinita.
• Esiste una proprietà stylesche consente di applicare stili globali esterni all'applicazione.
• Specifica il percorso a bootstrap.min.css

Al termine, dovrebbe apparire come segue:

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

Nota: quando si apportano modifiche, .angular-cli.jsonè necessario riavviare ng serveper raccogliere le modifiche alla configurazione.

Progetto di test

Apri app.component.htmle aggiungi il seguente markup:

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

Con l'applicazione configurata, esegui ng serveper eseguire l'applicazione in modalità di sviluppo. Nel tuo browser vai all'applicazione localhost:4200. Verifica che appaia il pulsante in stile bootstrap.

Usando SASS

Iniziare

Crea un nuovo progetto e naviga nel progetto

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

Installazione di Bootstrap

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

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

Configurazione del progetto

Crea un file vuoto _variables.scssin src/.

Se si utilizza bootstrap-sass, aggiungere quanto segue a _variables.scss:

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

In styles.scssaggiungere quanto segue:

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

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

Progetto di test

Apri app.component.htmle aggiungi il seguente markup:

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

Con l'applicazione configurata, esegui ng serveper eseguire l'applicazione in modalità di sviluppo. Nel tuo browser vai all'applicazione localhost:4200. Verifica che appaia il pulsante in stile bootstrap. Per assicurarsi che le variabili vengano utilizzate, apri _variables.scsse aggiungi quanto segue:

$brand-primary: red;

Ritorna il browser per vedere il colore del carattere cambiato.

Aggiornamento v1.0.0-beta.26

Puoi vedere sul documento il nuovo modo di importare bootstrap qui

Se continua a non funzionare, riavviare con il comando ng serve

1.0.0 o versioni precedenti:

Nel tuo file index.html hai solo bisogno del collegamento css bootstrap (non sono necessari script js)

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

E

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

Dopo aver installato ng2-bootstrap in 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'
  }
};

E in my_project / angular-cli-build.js:

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

Non dimenticare questo comando per mettere il tuo modulo nel fornitore:

ng build

per importare da un altro modulo che è lo stesso principio.

Immagino che i metodi sopra elencati siano cambiati dopo il rilascio, controlla questo link

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

avviare il progetto

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

installa ng-bootstrap e bootstrap

npm install ng2-bootstrap bootstrap --save

apri src / app / app.module.ts e aggiungi

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

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

apri angular-cli.json e inserisci una nuova voce nella matrice degli stili

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

apri src / app / app.component.html e testa tutti i lavori aggiungendo

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

Passaggi per Bootstrap 4 in Angular 5

1. Crea progetto Angular 5

   del nuovo AngularBootstrapTest

2. Passa alla directory del progetto

   cd AngularBootstrapTest

3. Scarica bootstrap

   npm installa bootstrap

4. Aggiungi Bootstrap al progetto

   4.1 aprire .angular-cli.json

   4.2 trova la sezione "stili" nel json

   4.3 aggiungere il percorso cst bootstrap come di seguito

   .

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

Ora hai aggiunto con successo il bootstrap css nel progetto angolare 5

Prova il bootstrap

5. Aperto src/app/app.component.html
6. aggiungi il componente pulsante bootstrap

.

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

puoi fare riferimento agli stili dei pulsanti qui ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. salva il file

8. eseguire il progetto

   ng serve --open

Ora vedrai il pulsante stile bootstrap nella pagina

Nota: se hai aggiunto il percorso di bootstrap dopo ng serve , devi interrompere ed eseguire nuovamente il servizio ng per riflettere le modifiche

Dal momento che questo è diventato così confuso e le risposte qui sono totalmente contrastanti, suggerirò semplicemente di andare con l' u-team ufficiale per il repository BS4 (sì, ci sono così tanti di questi repository per NG-Bootstrap.

Segui le istruzioni qui https://github.com/ng-bootstrap/ng-bootstrap per ottenere BS4.

Citando dalla lib:

Questa libreria è stata creata da zero dal team di ui-bootstrap. Stiamo usando TypeScript e abbiamo come target il framework CSS Bootstrap 4.

Come con Bootstrap 4, questa libreria è in fase di elaborazione. Consulta il nostro elenco di problemi per vedere tutte le cose che stiamo implementando. Sentiti libero di commentare lì.

Basta copiare incollando ciò che è lì per il gusto di farlo:

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

Una volta installato è necessario importare il nostro modulo principale:

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

L'unica parte rimanente è elencare il modulo importato nel modulo dell'applicazione. Il metodo esatto sarà leggermente diverso per il modulo radice (di livello superiore) per il quale dovresti finire con il codice simile a (notare NgbModule.forRoot ()):

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

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

Altri moduli nella tua applicazione possono semplicemente importare NgbModule:

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

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

Questo sembra di gran lunga il comportamento più coerente

1. Installa bootstrap

   npm install bootstrap@next

2. Aggiungi codice a .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. Infine aggiungi bootstrap.css al tuo codice style.scss

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

4. Riavvia il server locale

Procedi come segue:

1. npm install --save bootstrap

2. E nel tuo .angular-cli.json, aggiungi alla sezione stili:

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

Successivamente, è necessario riavviare il servizio ng

Godere

1. Installa Bootstrap usando npm

   npm install bootstrap

2.Installare Popper.js

npm install --save popper.js

3.Andare angular.json nel progetto Angular 6 / .angular-cli.json in Angular 5 e aggiungere l'elenco:

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

Prova questo

npm install bootstrap@next

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

Puoi anche guardare questo video di Mike Brocchi che contiene informazioni utili su come aggiungere bootstrap al tuo progetto generato da Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (circa 13:00 circa)

1. Corri in bash npm install ng2-bootstrap bootstrap --save
2. Aggiungi / Modifica quanto segue in 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" ],

Aprire Terminale / prompt dei comandi nella rispettiva directory del progetto e digitare il comando seguente.

npm install --save bootstrap

Quindi aprire il file .angular-cli.json, cercare

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

cambialo in

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

Tutto fatto.

Ora con la nuova versione ng-bootstrap 1.0.0-beta.5 supporta la maggior parte delle direttive angolari native basate sul markup e CSS di Bootstrap.

L'unica dipendenza richiesta per lavorare con questo è bootstrap. Non è necessario utilizzare le dipendenze jquery e popper.js .

ng-bootstrap sostituisce completamente l'implementazione JavaScript per i componenti. Quindi non è necessario includere bootstrap.min.jsnella sezione script il tuo .angular-cli.json.

seguire questi passaggi quando si sta integrando bootstrap con il progetto generato con l'ultima versione di angular-cli.

• Inculde bootstrap.min.cssnel tuo .angular-cli.json, sezione stili.

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

• Installa la dipendenza ng-bootstrap .

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

• Aggiungi questo alla tua classe di modulo principale.

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

• Includere quanto segue nella sezione di importazione del modulo principale.

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

• Effettuare le seguenti operazioni anche nei moduli secondari se si utilizzano componenti ng-bootstrap all'interno di tali classi di moduli.

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

• Ora il tuo progetto è pronto per l'uso dei componenti ng-bootstrap disponibili.

1. Installa bootstrap, popper.js

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

3. In src / styles.css , importa lo stile di bootstrap

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

Step1:
npm install bootstrap@latest --save-dev Questo installerà l'ultima versione del bootstrap, tuttavia, la versione specificata può essere installata aggiungendo il numero di versione

Passaggio 2: Apri styles.css e aggiungi quanto segue @import "~bootstrap/dist/css/bootstrap.css"

Per aggiungere sia Bootstrap che Jquery

npm install bootstrap@3 jquery --save

dopo aver eseguito questo comando, vai avanti e controlla la cartella node_modules, dovresti essere in grado di vedere bootstrap e jquery aggiunti in esso.

angular-cliora ha una pagina wiki dedicata dove puoi trovare tutto ciò di cui hai bisogno. TLDR, installa bootstraptramite npme aggiungi il link degli stili alla sezione "stili" nel tuo .angular-cli.jsonfile

Esempio di funzionamento in caso di utilizzo di angular-cli e css:

1.installare il bootstrap

npm installa bootstrap tether jquery --save

2.aggiungere a .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"
  ],

installa boostrap usando npm

npm install boostrap@next --save

quindi controlla la cartella node_modules per il file boostrap.css (entro dist) normalmente il percorso è

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

aggiungi questo percorso | importa boostrap in style.css o style.scss

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

questo è tutto.

Esegui questo comando all'interno del progetto

npm install --save @bootsrap@4

e se ricevi una conferma come questa

+ bootstrap@4.1.3
updated 1 package in 8.245s

Significa che boostrap 4 è stato installato con successo. Tuttavia, per usarlo, è necessario aggiornare l'array "styles" nel file angular.json.

Aggiornalo nel modo seguente in modo che bootstrap sia in grado di sovrascrivere gli stili esistenti

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

Per assicurarti che tutto sia impostato correttamente, esegui 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, quindi sei bravo a usare boostrap.

Non ho visto questo qui:

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

Ho appena aggiunto questa riga in style.scss Nel mio caso volevo anche sostituire le variabili bootstrap.

Se hai appena iniziato con angolare e bootstrap, la risposta semplice sarebbe la seguente: 1. Aggiungi il pacchetto del nodo bootstrap come dipendenza dev

npm install --save bootstrap

2. importare stylessheet bootstrap nel file angular.json.

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

3. e sei pronto per usare il bootstrap per lo styling, la griglia, ecc.

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

La parte migliore di ciò che ho scoperto è che stiamo dirigendo usando bootstrap senza alcuna dipendenza del modulo di terze parti. Possiamo aggiornare bootstrap in qualsiasi momento semplicemente aggiornando il comando npm install --save bootstrap@4.4ecc.

Hai molti modi per aggiungere Bootstrap 4 nel tuo progetto Angular :

• Includendo i file CSS e JavaScript Bootstrap nella sezione del file index.html del progetto Angular con un e tag,

• Importazione del file CSS Bootstrap nel file styles.css globale del progetto Angular con una parola chiave @import.

• Aggiunta dei file CSS e JavaScript Bootstrap negli array di stili e script del file angular.json del progetto

Esegui questo comando

npm install bootstrap@3

il tuo Angular.json

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

puoi installare bootstrap in angolare usando il npm install bootstrapcomando.

e il percorso di bootstrap di installazione successivo in angular.jsonfile e style.cssfile.

puoi leggere un blog completo su come installare e configurare bootstrap in angolare, fai clic qui per leggere il blog completo su questo

Un esempio funzionante in caso di utilizzo di angular-cli:

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

Funziona per CSS e SCSS. Bootstrap v3 e v4 sono disponibili.

Maggiori informazioni sugli schemi bootstrap sono disponibili qui .