Hoe bootstrap toe te voegen aan een angular-cli-project

We willen bootstrap 4 (4.0.0-alpha.2) gebruiken in onze app die is gegenereerd met angular-cli 1.0.0-beta.5 (met node v6.1.0).

Nadat we bootstrap en zijn afhankelijkheden met npm hadden gekregen, bestond onze eerste aanpak erin ze toe te voegen in angular-cli-build.js:

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

en importeer ze in onze 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>

Dit werkte prima met ng servemaar zodra we een build met de vlag -prodproduceerden, verdwenen al deze afhankelijkheden uit dist/vendor(verrassing!).

Hoe moeten we omgaan met een dergelijk scenario (d.w.z. het laden van bootstrap-scripts) in een project dat is gegenereerd met angular-cli ?

We hadden de volgende gedachten, maar we weten niet echt welke kant we op moeten…

• een CDN gebruiken? maar we geven deze bestanden liever weer om te garanderen dat ze beschikbaar zijn

• afhankelijkheden kopiëren naar dist/vendorna onze ng build -prod? Maar dat lijkt iets dat angular-cli zou moeten bieden, omdat het ‘zorgt’ voor het bouwgedeelte ?

• jQuery, bootstrap en tether toevoegen in src/system-config.tsen ze op de een of andere manier in onze bundel in main.tstrekken? Maar dat leek verkeerd aangezien we ze niet expliciet in de code van onze applicatie gaan gebruiken (in tegenstelling tot bijvoorbeeld moment.js of iets als lodash).

Antwoord 1, autoriteit 100%

BELANGRIJKE UPDATE:ng2-bootstrapis nu vervangen door ngx-bootstrap

ngx-bootstrapondersteunt zowel Angular 3 als 4.

Update:1.0.0-beta.11-webpack of hogere versies

Controleer eerst uw angular-cliversie met het volgende commando in de terminal:

ng -v

Als uw angular-cli-versie groter is dan 1.0.0-beta.11-webpack, moet u deze stappen volgen:

1. Installeer ngx-bootstrapen bootstrap:

   npm install ngx-bootstrap bootstrap --save
   

Deze regel installeert tegenwoordig Bootstrap 3, maar kan in de toekomst Bootstrap 4 installeren. Houd er rekening mee dat ngx-bootstrapbeide versies ondersteunt.

2. Open src/app/app.module.tsen voeg toe:

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

3. Open angular-cli.json(voor angular6 en later is de bestandsnaam gewijzigd in angular.json) en voeg een nieuw item in de stylesmatrix:

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

4. Open src/app/app.component.htmlen voeg toe:

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

1.0.0-beta.10 of lagere versies:

En als uw angular-cli-versie 1.0.0-beta.10of lager is, kunt u onderstaande stappen gebruiken.

Ga eerst naar de projectdirectory en typ:

npm install ngx-bootstrap --save

Open vervolgens uw angular-cli-build.jsen voeg deze regel toe:

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

Open nu uw src/system-config.tsen schrijf vervolgens:

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

…en:

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

Antwoord 2, autoriteit 47%

Zoeken naar het sleutelwoord > Algemene bibliotheekinstallatie
op https://github.com/angular/angular-clihelpt je het antwoord te vinden.

Volgens hun document kunt u de volgende stappen nemen om de Bootstrap-bibliotheek toe te voegen.

Installeer eerst Bootstrap vanaf npm:

npm install bootstrap@next

Voeg vervolgens de benodigde scriptbestanden toe aan apps[0].scripts in het bestand angular-cli.json:

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

Voeg tenslotte de Bootstrap CSS toe aan de apps[0].styles-array:

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

Herstart de service als u deze gebruikt, en Bootstrap 4 zou moeten werken aan uw app.

Dit is de beste oplossing.
Maar als je ng serve niet herstart, werkt het nooit. Het wordt sterk aanbevolen om deze laatste handeling uit te voeren.

Antwoord 3, autoriteit 22%

Doe het volgende:

npm i bootstrap@next --save

Hiermee wordt bootstrap 4 aan uw project toegevoegd.

Ga vervolgens naar je src/style.scssof src/style.cssbestand (kies welke je gebruikt) en importeer bootstrap daar:

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

Voor style.scss

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

Voor scripts moet je het bestand nog steeds als volgt toevoegen aan het bestand angular-cli.json (In Angular versie 6 moet deze bewerking worden gedaan in het bestand angular.json):

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

Antwoord 4, autoriteit 10%

In het begin moet je tether, jQuery en bootstrap installeren met deze commando’s

npm i -S tether
npm i -S jquery
npm i -S [email protected] 

Nadat u deze regels hebt toegevoegd aan uw bestand angular-cli.json (angular.json vanaf versie 6)

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

Antwoord 5, autoriteit 5%

V1.0.0-beta.26 bijwerken

Je kunt in het document zien hoe je bootstrap hier

Als het nog steeds niet werkt, herstart dan met het commando ng serve

1.0.0 of lager versies:

In uw index.html-bestand heeft u alleen een bootstrap css-link nodig (geen js-scripts nodig)

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

En

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

Na het installeren van ng2-bootstrapin 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'
  }
};

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

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

Vergeet deze opdracht niet
om uw module in de leverancier te plaatsen:

ng build

om te importeren uit een andere module met hetzelfde principe.

Antwoord 6, autoriteit 3%

1. Installeer bootstrap

   npm install bootstrap@next
   

2. Voeg code toe aan .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. Voeg laatst bootstrap.css toe aan je code style.scss

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

4. Herstart uw lokale server

Antwoord 7, autoriteit 3%

Stappen voor Bootstrap 4 in Angular 5

1. Hoek 5-project maken

   nieuwe AngularBootstrapTest

2. Verplaats naar projectmap

   cd AngularBootstrapTest

3. Bootstrap downloaden

   npm bootstrap installeren

4. Voeg Bootstrap toe aan project

   4.1 open .angular-cli.json

   4.2 zoek de sectie “stijlen” in de json

   4.3 voeg het bootstrap css-pad toe zoals hieronder

   .

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

Je hebt nu met succes de bootstrap css toegevoegd in angular 5 project

bootstrap testen

5. open src/app/app.component.html
6. bootstrap-knopcomponent toevoegen

.

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

u kunt hier naar de stijlen van de knoppen verwijzen( https://getbootstrap.com/docs/4.0 /componenten/knoppen/)

7. het bestand opslaan

8. voer het project uit

   dienen –open

Nu zie je de bootstrap-stijlknop op de pagina

Opmerking:
als je een bootstrap-pad hebt toegevoegd na ng serve, moet je de ng serve stoppen en opnieuw uitvoeren om de wijzigingen weer te geven

Antwoord 8, autoriteit 2%

2 eenvoudige stappen

1. Installeer Bootstrap (ben de nieuwste versie aan het installeren)

npm install bootstrap@next

2. Importeer in uw project, voeg onderstaande regel toe aan uw styles.scss

@import '~bootstrap';

Houd er rekening mee dat uw importvolgorde van belang kan zijn, als u andere bibliotheken heeft die bootstrap gebruiken, bewaar deze importverklaring dan bovenaan

Het einde. 🙂

OPMERKING: hieronder staan ​​mijn versies

hoekig : 9

knooppunt: v10.16.0

npm: 6.9.1

Antwoord 9, autoriteit 2%

Ik vermoed dat de bovenstaande methoden zijn gewijzigd na de release, bekijk deze link

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

project starten

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

installeer ng-bootstrap en bootstrap

npm install ng2-bootstrap bootstrap --save

open src/app/app.module.ts en voeg toe

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

open angular-cli.json en voeg een nieuw item in de stijlen-array in

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

open src/app/app.component.html en test alle werken door toe te voegen

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

Antwoord 10, autoriteit 2%

Omdat dit zo verwarrend werd en de antwoorden hier totaal gemengd zijn, zal ik voorstellen om met het officiële ui-team voor BS4repo te gaan (ja, er zijn zoveel van die repo’s voor NG-Bootstrap.

Volg gewoon de instructies hier https://github.com/ng-bootstrap/ng-bootstrap om BS4 te krijgen.

Citeer uit de bibliotheek:

Deze bibliotheek wordt helemaal opnieuw opgebouwd door het ui-bootstrap-team. We
gebruiken TypeScript en richten zich op het Bootstrap 4 CSS-framework.

Net als bij Bootstrap 4 is deze bibliotheek een werk in uitvoering. Gelieve dit na te kijken
uit onze lijst met problemen om alle dingen te zien die we implementeren. Voelen
vrij om daar opmerkingen te maken.

Kopieer en plak wat er is omwille van het:

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

Na installatie moet u onze hoofdmodule importeren:

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

Het enige dat overblijft is om de geïmporteerde module in uw toepassingsmodule te vermelden. De exacte methode zal iets anders zijn voor de root (top-level) module waarvoor je de code zou moeten krijgen die lijkt op (let op NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Andere modules in uw applicatie kunnen eenvoudig NgbModule importeren:

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

Dit lijkt verreweg het meest consistente gedrag

Antwoord 11, autoriteit 2%

Voer deze opdracht uit

npm install bootstrap@3

uw Angular.json

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

Antwoord 12, autoriteit 2%

Voer de volgende stappen uit:

1. npm install --save bootstrap

2. En in je .angular-cli.json, voeg toe aan stijlensectie:

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

Daarna moet u uw ng-server opnieuw starten

Geniet

Antwoord 13, autoriteit 2%

1. Installeer Bootstrap met npm

   npm install bootstrap
   

2.Popper.js installeren

npm install --save popper.js

3.Ga naar angular.jsonin Angular 6-project / .angular-cli.jsonin Angular 5 en voeg het volgende toe:

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

Antwoord 14

Open Terminal/opdrachtprompt in de respectievelijke projectdirectory en typ de volgende opdracht.

npm install --save bootstrap

Open vervolgens het bestand .angular-cli.json, zoek naar

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

verander dat in

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

Alles klaar.

Antwoord 15

Nu met de nieuwe ng-bootstrap 1.0.0-beta.5-versie ondersteunt de meeste native Angular-richtlijnen op basis van Bootstrap’s opmaak en CSS.

De enige vereiste om hiermee te werken is bootstrap. Het is niet nodig om jQueryen popper.jsafhankelijkheden te gebruiken.

ng-bootstrap is om de JavaScript-implementatie voor componenten volledig te vervangen. U hoeft dus geen bootstrap.min.jsop te nemen in het gedeelte met scripts in uw .angular-cli.json.

volg deze stappen wanneer u bootstrap integreert met een gegenereerd project met de nieuwste versie van angular-cli.

• Voeg bootstrap.min.csstoe in uw .angular-cli.json, stijlen-sectie.

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

• Installeer ng-bootstrapafhankelijkheid.

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

• Voeg dit toe aan je hoofdmoduleklas.

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

• Neem het volgende op in het gedeelte over importeren van de hoofdmodule.

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

• Doe het volgende ook in uw submodule(s) als u ng-bootstrap-componenten binnen die moduleklassen gaat gebruiken.

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

• Uw project is nu klaar om beschikbare ng-bootstrap-componenten te gebruiken.

Antwoord 16

1. Installeer bootstrap, popper.js

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

3. In src/styles.css, importeer de bootstrap-stijl

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

Antwoord 17

Ik zie dat veel van de oplossingen niet meer werken met de nieuwe versies van Angular-CLI.

U kunt proberen de volgende linktag bovenaan en scripttags onderaan in uw app.component.html toe te voegen.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Maar als je ngx-bootstrap wilt gebruiken, voer dan de volgende opdracht uit in je projectdirectory

ng add ngx-bootstrap

Test het uit met het volgende als de inhoud van uw app.component.html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Antwoord 18

voor bootstrap 4.5, hoekig 10

npm install bootstrap --save

werk je stijlen.scss op deze manier bij met een bootstrap-importstatement.

$theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);
@import "~bootstrap";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

het importeren van bootstrap zou moeten gebeuren nadat uw variabele is overschreven. [dit voorbeeld laat ook zien hoe u uw eigen themakleuren kunt plaatsen.]

Antwoord 19

Je kunt ook deze video van Mike Brocchi bekijken, die nuttige informatie bevat over het toevoegen van bootstrap aan je door Angular-Cli gegenereerde project.
https://www.youtube.com/watch?v=obbdFFbjLIU(ongeveer 13 minuten) :00)

Antwoord 20

1. Uitvoeren in bash npm install ng2-bootstrap bootstrap --save
2. Voeg/wijzig het volgende 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"
],

Antwoord 21

Probeer dit

npm install bootstrap@next

https://github.com/angular/angular-cli#global -bibliotheek-installatie

Antwoord 22

Voer dit volgende commando uit binnen het project

npm install --save @bootsrap@4

en als je zo’n bevestiging krijgt

+ [email protected]
updated 1 package in 8.245s

Dit betekent dat boostrap 4 succesvol is geïnstalleerd. Om het te gebruiken, moet u echter de array “stijlen” onder het bestand angular.json bijwerken.

Werk het op de volgende manier bij zodat bootstrap de bestaande stijlen kan overschrijven

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

Om er zeker van te zijn dat alles correct is ingesteld, voert u 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, dan ben je goed om boostrap te gebruiken.

Antwoord 23

Stap1:
npm install bootstrap@latest --save-dev
Hiermee wordt de nieuwste versie van de bootstrap geïnstalleerd,
De opgegeven versie kan echter worden geïnstalleerd door het versienummer toe te voegen

Stap 2: Open stijlen.css en voeg het volgende toe:
@import "~bootstrap/dist/css/bootstrap.css"

Antwoord 24

Voor het toevoegen van beide Bootstrap en JQuery

npm install bootstrap@3 jquery --save

na het uitvoeren van deze opdracht, ga je gang en controleer je node_modules-map. Je zou bootstrap en jQuery erin moeten kunnen zien.

Antwoord 25

Als je net bent begonnen met angular en bootstrap, dan zou het simpele antwoord de onderstaande stappen zijn:
1. Voeg een knooppuntpakket van bootstrap toe als dev-afhankelijkheid

npm install --save bootstrap

2. importeer bootstrap-stijlblad in angular.json-bestand.

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

3. en je bent klaar om bootstrap te gebruiken voor styling, raster enz.

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

Het beste deel hiervan dat ik ontdekte, was dat we regisseren met behulp van bootstrap zonder enige afhankelijkheid van modules van derden. We kunnen bootstrap op elk moment upgraden door het commando npm install --save [email protected]etc. bij te werken.

Antwoord 26

Bijgewerkt aug-2020: Angular 10

“Als u een Angular ≥ 9 CLI-project heeft, kunt u eenvoudig onze schema’s gebruiken om de ng-bootstrap-bibliotheek eraan toe te voegen.” Voer gewoon de volgende opdracht uit in uw projectmap. Alle configuraties worden automatisch toegevoegd.

ng add @ng-bootstrap/ng-bootstrap

ng s

Voorbeeldfragmenten:

import {Component} from '@angular/core';
@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

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

npm install boostrap@next --save

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

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