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 serve
maar zodra we een build met de vlag -prod
produceerden, 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/vendor
na onzeng 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.ts
en ze op de een of andere manier in onze bundel inmain.ts
trekken? 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:
-
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.
-
Open src/app/app.module.tsen voeg toe:
import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... })
-
Open angular-cli.json(voor angular6 en later is de bestandsnaam gewijzigd in angular.json) en voeg een nieuw item in de
styles
matrix:"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
-
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.scss
of src/style.css
bestand (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%
-
Installeer bootstrap
npm install bootstrap@next
-
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" ],
-
Voeg laatst bootstrap.css toe aan je code style.scss
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
-
Herstart uw lokale server
Antwoord 7, autoriteit 3%
Stappen voor Bootstrap 4 in Angular 5
-
Hoek 5-project maken
nieuwe AngularBootstrapTest
-
Verplaats naar projectmap
cd AngularBootstrapTest
-
Bootstrap downloaden
npm bootstrap installeren
-
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
- open
src/app/app.component.html
- 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/)
-
het bestand opslaan
-
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
- Installeer Bootstrap (ben de nieuwste versie aan het installeren)
npm install bootstrap@next
- 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:
-
npm install --save bootstrap
-
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%
-
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.js
op 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.css
toe 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
- Installeer bootstrap, popper.js
npm install --save bootstrap
npm install --save popper.js
- 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
- Uitvoeren in bash
npm install ng2-bootstrap bootstrap --save
- 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
-
importeer bootstrap-stijlblad in angular.json-bestand.
"styles": [
"projects/my-app/src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
], -
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>
Antwoord 27
angular-cli
heeft nu een speciale wiki-paginawaar je alles kunt vinden wat je nodig hebt. TLDR, installeer bootstrap
via npm
en voeg de stijlen-link toe aan de sectie “stijlen” in uw .angular-cli.json
-bestand
Antwoord 28
Werkvoorbeeld bij gebruik van angular-cli en css :
1.bootstrap installeren
npm install bootstrap tether jQuery –save
2.toevoegen aan .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"
],
Antwoord 29
installeer boostrap met npm
npm install boostrap@next --save
controleer vervolgens uw node_modules-map voor het boostrap.css-bestand (binnen dist) normaal gesproken is het pad
"../node_modules/bootstrap/dist/css/bootstrap.css",
voeg dit pad toe | importeer boostrap in style.css of style.scss
@import "../node_modules/bootstrap/dist/css/bootstrap.css"; //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme
dat is het.