Winkel 4: Wie wird Bootstrap eingebunden?

npm install --save bootstrap

anschließend finden Sie in der Datei angle-cli.json (im Stammverzeichnis des Projekts) styles und fügen die bootstrap-css-Datei folgendermaßen hinzu: 

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

UPDATE:
in Winkel 6+ angular-cli.json wurde geändert in angular.json.

Video ansehen oder Folge dem Schritt 

Installieren Sie Bootstrap 4 in Winkel 2/Winkel 4/Winkel 5/Winkel 6

Es gibt drei Möglichkeiten, Bootstrap in Ihr Projekt aufzunehmen
1) Fügen Sie in der index.html-Datei einen CDN-Link hinzu 
2) Installieren Sie bootstrap mit npm und setzen Sie den Pfad in angle.jsonRecommended
3) Installieren Sie bootstrap mit npm und legen Sie den Pfad in der index.html-Datei fest

Ich habe empfohlen, dass Sie zwei Methoden verwenden, die mit npm bootstrap installiert werden, da sie in Ihrem Projektverzeichnis installiert sind und Sie problemlos darauf zugreifen können

Methode 1

Fügen Sie Ihrer eckigen Projekt-index.html-Datei den Bootstrap-, Jquery- und popper.js-CDN-Pfad hinzu

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " 
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Methode 2

1) Installieren Sie bootstrap mit npm 

npm install bootstrap --save

nach der Installation von Bootstrap 4 benötigen wir zwei weitere Javascript-Pakete, dh Jquery und Popper.js, ohne diese beiden Pakete. Bootstrap ist nicht vollständig, da Bootstrap 4 das Paket Jquery und Popper.js verwendet. Daher müssen wir es auch installieren

2) Installieren Sie JQUERY

npm install jquery --save

3) Installieren Sie Popper.js

npm install popper.js --save

Jetzt ist Bootstrap in Ihrem Projektverzeichnis im Ordner node_modules installiert

open angle.json Diese Datei steht in Ihrem Winkelverzeichnis zur Verfügung. Öffnen Sie diese Datei und fügen Sie den Pfad der Bootstrap-, Jquery- und Popper.js-Dateien in styles [] und Scripts) hinzu [] Pfad siehe Beispiel unten

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Hinweis: Ändern Sie keine Folge von js-Dateien, es sollte so sein 

Methode 3

Installieren Sie Bootstrap mit npm. Folgen Sie Methode 2. In Methode 3 setzen wir einfach den Pfad innerhalb der index.html-Datei anstelle von angle.json -Datei

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Jetzt funktioniert Bootstrap jetzt gut 

Um die Bootstrap-Abhängigkeit zu konfigurieren, müssen wir installl Bootstrap-Abhängigkeit mit npm.

$ npm install [email protected] --save

Hinweis: Der Befehl --save speichert die Abhängigkeit in unserer eckigen App in der package.json-Datei.

Nun, da wir die Abhängigkeiten haben, können wir Angular CLI .__ mitteilen. dass diese Styles geladen werden müssen, indem eine der folgenden Optionen oder beide verwendet werden:

option 1) Hinzufügen in die Datei src/styles.css

wir können die Abhängigkeiten wie folgt hinzufügen:

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

Option 2) Hinzufügen in angle-cli.json

Wir können die Stil-CSS-Dateien in die Datei angle-cli.json einfügen, die sich um .__ befindet. Root-Ordner unserer Winkel-App wie folgt:

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

Angular 4 - Bootstrap/@ ng-bootstrap-Setup

Installieren Sie zunächst bootstrap in Ihr Projekt mit dem folgenden Befehl:

npm install --save bootstrap

Fügen Sie dann diese Zeile "../node_modules/bootstrap/dist/css/bootstrap.min.css" .__ hinzu. in die Datei angle-cli.json (Stammordner) in Stilen

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

Installieren Sie nach der Installation der obigen Abhängigkeiten ng-bootstrap via:

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

Nach der Installation müssen Sie das Hauptmodul importieren.

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

Danach können Sie Alle Bootstrap-Widgets (z. B. Karussell, Modal, Popovers, QuickInfos, Registerkarten usw.) und einige weitere Goodies (Datumsauswahl, Bewertung, Timepicker, Typeahead) verwenden.

In Angular4 sollten Sie beim Umgang mit @types system Folgendes tun,

Tun,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

suche nach types array und füge jquery und bootstrap ein

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

im Kopfbereich folgende Einträge hinzufügen,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

Und beginnen Sie mit jquery und bootstrap both.

bitte verweisen Sie auf diesen Link https://github.com/angular/angular-cli/wiki/stories-include-bootstrap .

sie erhalten eine schrittweise Anleitung zum Einfügen der neuesten Bootstrap-Funktion in den angle 4 mithilfe von angle-cli.

Unten finden Sie detaillierte Schritte und Funktionsbeispiele unter https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angang-cli-project/

Sehr detaillierte Schritte mit entsprechender Erklärung. 

Schritte:Bootstrap von NPM installieren

Als nächstes müssen wir Bootstrap installieren. Wechseln Sie in das von uns erstellte Projekt (cd angle-bootstrap-example) und führen Sie den folgenden Befehl aus:

Für Bootstrap 3:

npm install bootstrap --save

Für Bootstrap 4 (derzeit in der Beta):

npm install [email protected] --save

ODERAlternative: Lokales Bootstrap-CSS Alternativ können Sie das Bootstrap-CSS auch herunterladen und lokal zu Ihrem Projekt hinzufügen. Ich habe Bootstrap von der Website heruntergeladen und Ordnerstile erstellt (gleiche Ebene wie styles.css):

Hinweis: Legen Sie Ihre lokalen CSS-Dateien nicht im Ordner "Assets" ab. Wenn wir die Produktion mit Angular CLI erstellen, werden die in .angular-cli.json deklarierten CSS-Dateien minimiert und alle Stile werden in einer einzigen styles.css zusammengefasst. Der Assets-Ordner wird während des Erstellungsprozesses in den Dist-Ordner kopiert (der CSS-Code wird dupliziert). Platzieren Sie Ihre lokalen CSS-Dateien nur dann unter Assets, wenn Sie sie direkt in die index.html importieren.

Importieren des CSS 1.Wir haben zwei Optionen, um das aus NPM installierte CSS aus Bootstrap zu importieren:

strong text 1: .angular-cli.json konfigurieren:

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

2: Direkter Import in src/style.css oder src/style.scss:

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

Ich persönlich bevorzuge es, alle meine Styles in src/style.css zu importieren, da sie bereits in .angular-cli.json deklariert wurden.

3.1 Alternative: Local Bootstrap CSS Wenn Sie die Bootstrap CSS-Datei lokal hinzugefügt haben, importieren Sie sie einfach in .angular-cli.json

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

oder src/style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Bootstrap-JavaScript-Komponenten mit ngx-bootstrap (Option 1) Falls Sie keine Bootstrap-JavaScript-Komponenten (für die JQuery erforderlich ist) verwenden müssen, ist dies alles, was Sie benötigen. Wenn Sie jedoch Modals, Akkordeon, Datepicker, QuickInfos oder andere Komponenten verwenden müssen, wie können wir diese Komponenten verwenden, ohne jQuery zu installieren?

Es gibt eine Angular-Wrapper-Bibliothek für Bootstrap mit dem Namen ngx-bootstrap, die wir auch von NPM installieren können:

npm install ngx-bootstrap --save

Note ng2-bootstrap und ngx-bootstrap sind dasselbe Paket. ng2-bootstrap wurde nach #itsJustAngular in ngx-bootstrap umbenannt.

Falls Sie Bootstrap und ngx-bootstrap gleichzeitig installieren möchten, wenn Sie Ihr Angular-CLI-Projekt erstellen:

npm install bootstrap ngx-bootstrap --save

4.1: Hinzufügen der erforderlichen Bootstrap-Module in app.module.ts

Gehen Sie den ngx-bootstrap durch und fügen Sie die benötigten Module in Ihrer app.module.ts hinzu. Angenommen, wir möchten die Komponenten Dropdown, Tooltip und Modal verwenden:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Da wir die .forRoot () -Methode für jedes Modul aufrufen (aufgrund der ngx-bootstrap-Modulanbieter), sind die Funktionalitäten in allen Komponenten und Modulen Ihres Projekts (globaler Geltungsbereich) verfügbar.

Wenn Sie den ngx-bootstrap in einem anderen Modul organisieren möchten (nur für organisatorische Zwecke, falls Sie viele bs-Module importieren möchten und Ihr app.module nicht durcheinander bringen möchten), können Sie ein Modul erstellen app-bootstrap.module.ts importieren Sie die Bootstrap-Module (mit forRoot ()) und deklarieren Sie sie auch im Exportbereich (damit sie auch für andere Module verfügbar sind).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Vergessen Sie nicht, Ihr Bootstrap-Modul in app.module.ts zu importieren.

import {AppBootstrapModule} aus './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap funktioniert mit Bootstrap 3 und 4. Außerdem habe ich einige Tests durchgeführt und die meisten Funktionen funktionieren auch mit Bootstrap 2.x (ja, ich habe noch etwas älteren Code, den ich pflegen muss).

Hoffe das hilft jemandem!

Wenn Sie Sass/Scss verwenden, folgen Sie diesen Anweisungen.

Npm installieren

npm install bootstrap --save

und import-Anweisung zu Ihrer sass/scss-Datei hinzufügen,

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

Für Bootstrap 4.0.0-alph.6

npm install [email protected] jquery tether --save

Dann, nachdem dies erledigt ist, führen Sie Folgendes aus:

npm install

Jetzt. Öffnen Sie die Datei .angular-cli.json und importieren Sie Bootstrap, Jquery und Tether:

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

Und nun. Du bist bereit zu gehen.

Führen Sie den folgenden Befehl in Ihrem Projekt aus. Das heißt npm install [email protected] --save

Führen Sie nach der Installation der obigen Abhängigkeit den folgenden Befehl npm aus, der das Bootstrap-Modul npm install installiert --save @ ng-bootstrap/ng-bootstrap

Überprüfen Sie dies für die Referenz - https://github.com/ng-bootstrap/ng-bootstrap

Fügen Sie den folgenden Import in app.module import {NgbModule} aus '@ ng-bootstrap/ng-bootstrap' hinzu. und fügen Sie den Importen NgbModule hinzu

In Ihrer stye.css @ Import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

In Angular 7.0.0 getestet

Schritt 1 - Installieren Sie die erforderlichen Abhängigkeiten

npm install bootstrap (wenn Sie eine bestimmte Version wünschen, geben Sie bitte die Versionsnummer an.)

npm install popper.js (wenn Sie eine bestimmte Version wünschen, geben Sie bitte die Versionsnummer an.)

npm install jquery

Versionen, die ich ausprobiert habe: 

"bootstrap": "^4.1.3",
    "popper.js": "^1.14.5",
    "jquery": "^3.3.1",

Schritt 2: Geben Sie die Bibliotheken in der folgenden Reihenfolge in angle.json an. In der neuesten Version lautet der Name der Konfigurationsdatei "angle.json" nicht "angle-cli.json"

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

Schritt 1: Npm install bootstrap --save

Schritt: 2: Fügen Sie den folgenden Code in angle.json Node_modules/bootstrap/dist/css/bootstrap.min.css ein

Schritt 3: Ng dienen

Angular 6 CLI, tun Sie einfach: 

ng add @ ng-bootstrap/schematics

Wenn Sie Bootstrap online verwenden möchten und Ihre Anwendung Zugriff auf das Internet hat, können Sie hinzufügen 

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

In Ihre Hauptdatei style.css. und es ist der einfachste Weg. 

Referenz: angle.io

Hinweis. Diese Lösung lädt Bootstrap von der unpkg-Website und muss über einen Internetzugang verfügen. 

installieren Sie zunächst Bootstrap in Ihrem Projekt mit npm npm i bootstrap Danach öffnen Sie die Datei ur style.css in Ihrem Projekt und fügen Sie diese Zeile hinzu

@import "~bootstrap/dist/css/bootstrap.css";

und das ist es Bootstrap in Ihrem Projekt hinzugefügt

| * | Bootstrap 4 für Angular 2, 4, 5, 6 + installieren:

| +> Installiere Bootstrap mit npm

npm install bootstrap --save

npm install popper.js --save

| +> Fügen Sie Stile und Skripte zu angle.json hinzu

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Um die neueste Version zu installieren, verwenden Sie $ npm i --save bootstrap @ next 

Wie ich sehen kann, haben Sie bereits viele Antworten erhalten, aber Sie können diese Methode ausprobieren.

Die beste Methode, jquery nicht in eckigen Formaten zu verwenden, bevorzuge ich die https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md - Methode Bootstrap ohne Bootstrap-Komponente js, die von Jquery abhängt.

npm install ngx-bootstrap bootstrap --save

Halten Sie Ihren Code-Code in eckig frei

in eckig-cli.json hinzufügen 

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

Es wird Arbeit sein, ich habe es überprüft.