So fügen Sie Bootstrap zu einem angle-cli-Projekt hinzu

Suchen Sie nach dem Schlüsselwort> Globale Bibliotheksinstallation Auf https://github.com/angular/angular-cli - , um die Antwort zu finden.

Nach ihrem Dokument können Sie die folgenden Schritte ausführen, um die Bootstrap-Bibliothek hinzuzufügen.

Installieren Sie zuerst Bootstrap von npm:

npm install [email protected]

Fügen Sie dann den apps [0] .scripts in der Datei angle-cli.json die erforderlichen Skriptdateien hinzu:

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

Fügen Sie schließlich das Bootstrap-CSS zum apps [0] .styles-Array hinzu:

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

Restart ng, wenn Sie es ausführen, und Bootstrap 4 sollte mit Ihrer App funktionieren.

Dies ist die beste Lösung. Wenn Sie ng Serv jedoch nicht neu starten, funktioniert es nie. Es wird dringend empfohlen, diese letzte Aktion auszuführen.

Mach Folgendes:

npm i [email protected] --save

Dadurch wird Bootstrap 4 zu Ihrem Projekt hinzugefügt.

Gehen Sie als nächstes zu Ihrer src/style.scss- oder src/style.css-Datei (wählen Sie, was Sie verwenden) und importieren Sie dort Bootstrap:

Für 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";

Für style.scss

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

Für Skripte müssen Sie die Datei immer noch in der Datei angle-cli.json hinzufügen (In Angular Version 6 muss diese Bearbeitung in der Datei angle.json ) erfolgen:

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

Zuerst müssen Sie mit diesen Befehlen Tether, Jquery und Bootstrap installieren

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

Fügen Sie diese Zeilen in Ihre Datei angle-cli.json (angle.json ab Version 6) ein 

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

Da sich noch niemand auf die offizielle Geschichte (Winkel-Cli-Team) bezogen hat, wie man Bootstrap noch einbezieht: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Include Bootstrap

Bootstrap ist ein beliebtes CSS-Framework, das in einem Angular-Projekt verwendet werden kann .. In diesem Handbuch werden Sie durch das Hinzufügen von Bootstrap zu Ihrem Angular-CLI-Projekt geführt und für die Verwendung von Bootstrap konfiguriert.

CSS verwenden

Fertig machen

Erstellen Sie ein neues Projekt und navigieren Sie in das Projekt

ng new my-app
cd my-app

Bootstrap installieren

Wenn das neue Projekt erstellt und fertig ist, müssen Sie als Nächstes Bootstrap als Abhängigkeit in Ihrem Projekt installieren. Mit der Option --save wird die Abhängigkeit in package.json gespeichert

# version 3.x
npm install bootstrap --save

# version 4.x
npm install [email protected] --save

Projekt konfigurieren

Jetzt, da das Projekt eingerichtet ist, muss es so konfiguriert sein, dass es das Bootstrap-CSS enthält.

• Öffnen Sie die Datei .angular-cli.json im Stammverzeichnis Ihres Projekts.
• Unter der Eigenschaft apps ist das erste Element in diesem Array die Standardanwendung.
• Es gibt eine Eigenschaft styles, mit der externe globale Stile auf Ihre Anwendung angewendet werden können.
• Geben Sie den Pfad zu bootstrap.min.css an.

Es sollte wie folgt aussehen, wenn Sie fertig sind:

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

Hinweis: Wenn Sie Änderungen an .angular-cli.json vornehmen, müssen Sie ng serve neu starten, um Konfigurationsänderungen zu übernehmen.

Testprojekt

Öffnen Sie app.component.html und fügen Sie die folgende Markierung hinzu:

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

Führen Sie nach der Konfiguration der Anwendung ng serve aus, um Ihre Anwendung im Entwicklungsmodus auszuführen. __ Navigieren Sie in Ihrem Browser zur Anwendung localhost:4200. Stellen Sie sicher, dass die Schaltfläche mit dem Bootstrap-Stil angezeigt wird.

SASS verwenden

Fertig machen

Erstellen Sie ein neues Projekt und navigieren Sie in das Projekt

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

Bootstrap installieren

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

# version 4.x
npm install [email protected] --save

Projekt konfigurieren

Erstellen Sie eine leere Datei _variables.scss in src/.

Wenn Sie bootstrap-sass verwenden, fügen Sie _variables.scss Folgendes hinzu:

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

In styles.scss fügen Sie Folgendes hinzu:

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

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

Testprojekt

Öffnen Sie app.component.html und fügen Sie die folgende Markierung hinzu:

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

Führen Sie nach der Konfiguration der Anwendung ng serve aus, um Ihre Anwendung im Entwicklungsmodus auszuführen Navigieren Sie in Ihrem Browser zur Anwendung localhost:4200. Stellen Sie sicher, dass die Schaltfläche mit dem Bootstrap-Stil angezeigt wird. __ Um sicherzustellen, dass Ihre Variablen verwendet werden, öffnen Sie _variables.scss und fügen Sie hinzu folgende:

$brand-primary: red;

Bringen Sie den Browser zurück, um die geänderte Schriftfarbe anzuzeigen.

Update v1.0.0-beta.26 

Auf dem Dokument sehen Sie den neuen Weg zum Importieren von Bootstrap hier

Wenn es immer noch nicht funktioniert, starten Sie es erneut mit dem Befehl ng serve

1.0.0 oder darunter Versionen:

In Ihrer index.html-Datei benötigen Sie lediglich einen bootstrap-css-Link (keine js-Skripts erforderlich).

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

Und 

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

Nach der Installation von ng2-bootstrap in mein_projekt/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'
  }
};

Und in mein_projekt/angle-cli-build.js: 

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

Vergessen Sie nicht diesen Befehl , Um Ihr Modul in den Hersteller aufzunehmen: 

ng build

aus einem anderen Modul zu importieren, ist das gleiche Prinzip.

Ich denke, die oben genannten Methoden haben sich nach der Veröffentlichung geändert. Überprüfen Sie diesen Link

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

Projekt initiieren

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

install ng-bootstrap und bootstrap

npm install ng2-bootstrap bootstrap --save

src/app/app.module.ts öffnen und hinzufügen

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

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

Öffne die Datei angle-cli.json und füge einen neuen Eintrag in das styles-Array ein

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

src/app/app.component.html öffnen und alle Werke testen, indem Sie hinzufügen

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

Schritte für Bootstrap 4 in Angular 5

1. Erstellen Sie ein Winkelprojekt 5 

   ng neuer AngularBootstrapTest

2. Zum Projektverzeichnis wechseln 

   cd AngularBootstrapTest

3. Bootstrap herunterladen

   npm install bootstrap

4. Fügen Sie Bootstrap zu Project hinzu

   4.1 Öffnen Sie .angular-cli.json

   4.2 Finden Sie den Abschnitt "Styles" im Json

   4.3 Fügen Sie den Bootstrap-CSS-Pfad wie folgt hinzu

   .

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

Jetzt haben Sie erfolgreich die Bootstrap-CSS in eckigen 5-Projekt hinzugefügt

Bootstrap testen

5. src/app/app.component.html öffnen
6. fügen Sie die Bootstrap-Schaltfläche hinzu

.

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

sie können die Schaltflächenstile hier referenzieren ( https://getbootstrap.com/docs/4.0/components/buttons/ ).

7. speicher die Datei

8. führen Sie das Projekt aus

   ng dienen --open

Jetzt wird die Schaltfläche für den Bootstrap-Stil auf der Seite angezeigt

Hinweis : Wenn Sie nach ng serv einen Bootstrap-Pfad hinzufügen, müssen Sie den ng-Befehl stoppen und erneut ausführen, um die Änderungen widerzuspiegeln

Da dies so verwirrend wurde und die Antworten hier völlig gemischt sind, schlage ich vor, mit dem offiziellen Ui-Team für BS4 Repo zu gehen (ja, es gibt so viele Repos für NG-Bootstrap.) 

Folgen Sie einfach den Anweisungen hier https://github.com/ng-bootstrap/ng-bootstrap , um BS4 zu erhalten. 

Zitieren aus der lib: 

Diese Bibliothek wird vom ui-bootstrap-Team von Grund auf neu erstellt. Wir verwenden TypeScript und zielen auf das Bootstrap 4-CSS-Framework.

Wie bei Bootstrap 4 ist diese Bibliothek noch in Arbeit. Bitte prüfe In unserer Liste der Probleme finden Sie alle Dinge, die wir implementieren. Gefühl frei, dort Kommentare zu machen.

Kopieren Sie einfach das Einfügen, was der Sache wegen ist: 

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

Nach der Installation müssen Sie unser Hauptmodul importieren:

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

Der einzige verbleibende Teil besteht darin, das importierte Modul in Ihrem Anwendungsmodul aufzulisten. Die genaue Methode unterscheidet sich geringfügig für das Root-Modul (Top-Level-Modul), für das Sie den Code ähnlich wie (beachten Sie NgbModule.forRoot ()) erhalten sollten:

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

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

Andere Module in Ihrer Anwendung können NgbModule einfach importieren:

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

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

Dies scheint bei weitem das konsistenteste Verhalten zu sein

Führen Sie die folgenden Schritte aus:

1. npm install --save bootstrap

2. Fügen Sie in Ihrem .angular-cli.json den Abschnitt "Styles" hinzu: 

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

Danach müssen Sie Ihren Ng-Dienst neu starten

Genießen

1. Installieren Sie Bootstrap

    npm install [email protected]
   

2. Fügen Sie den Code zu .angular-cli.json hinzu:

      "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. Fügen Sie zuletzt bootstrap.css zu Ihrem Code style.scss hinzu

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

4. Starten Sie Ihren lokalen Server neu

Versuche dies

npm install [email protected]

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

1. Führen Sie in bash npm install ng2-bootstrap bootstrap --save aus
2. Folgendes hinzufügen/ändern 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" ],

1. Installieren Sie bootstrap, popper.js 

npm install --save bootstrapnpm install --save popper.js

3. Importieren Sie in src/styles.css den Stil von bootstrap

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

Sie können dieses Video auch von Mike Brocchi ansehen, das nützliche Informationen zum Hinzufügen von Bootstrap zu Ihrem von Angular-Cli generierten Projekt enthält. https://www.youtube.com/watch?v=obbdFFbjLIU (ca. 13:00 Uhr)

Mit der neuen ng-bootstrap 1.0.0-beta.5 - Version werden die meisten nativen Angular-Direktiven basierend auf Bootstraps Markup und CSS unterstützt. 

Die einzige Abhängigkeit, die erforderlich ist, um damit zu arbeiten, ist bootstrap. Keine Notwendigkeit, jquery und popper.js Abhängigkeiten zu verwenden.

ng-bootstrap ersetzt die JavaScript-Implementierung für Komponenten vollständig. Sie müssen also bootstrap.min.js nicht in den Skriptabschnitt Ihrer .angular-cli.json aufnehmen.

befolgen Sie diese Schritte, wenn Sie Bootstrap in ein generiertes Projekt mit der neuesten Version von angle-cli integrieren.

• Fügen Sie bootstrap.min.css in Ihren .angular-cli.json, Abschnitt Styles ein.

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

• Installiere ng-bootstrap Abhängigkeit.

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

• Fügen Sie dies Ihrer Hauptmodulklasse hinzu.

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

• Fügen Sie Folgendes in Ihren Hauptmodul-Importabschnitt ein.

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

• Gehen Sie auch in Ihren Submodulen vor, wenn Sie ng-bootstrap-Komponenten innerhalb dieser Modulklassen verwenden.

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

• Jetzt ist Ihr Projekt zur Verwendung verfügbarer ng-bootstrap-Komponenten bereit.

Funktionsbeispiel bei Verwendung von angle-cli und css:

1.installiere bootstrap

npm install Bootstrap-Tether-Jquery --save

2.addiere zu .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"
  ],

angular-cli hat jetzt eine eigene Wiki-Seite , auf der Sie alles finden, was Sie brauchen. TLDR, installieren Sie bootstrap über npm und fügen Sie den Link "Styles" zum Abschnitt "Styles" in Ihrer .angular-cli.json-Datei hinzu

Öffnen Sie die Terminal-/Befehlseingabeaufforderung im entsprechenden Projektverzeichnis und geben Sie den folgenden Befehl ein.

npm install --save bootstrap

Öffnen Sie dann die .angular-cli.json-Datei 

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

ändere das zu 

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

Alles erledigt.

Schritt 1:
npm install [email protected] --save-dev Dadurch wird die neueste Version des Bootstraps installiert Die angegebene Version kann jedoch durch Hinzufügen der Versionsnummer installiert werden

Schritt 2: Öffnen Sie styles.css und fügen Sie Folgendes ein @import "~bootstrap/dist/css/bootstrap.css"

installiere boostrap mit npm 

npm install [email protected] --save

Überprüfen Sie dann im Ordner node_modules nach der Datei boostrap.css (in dist), normalerweise lautet der Pfad 

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

diesen Pfad hinzufügen | importiere boostrap innerhalb von style.css oder style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "[email protected]/material/prebuilt-themes/Indigo-pink.css // angular material theme

das ist es.

Zum Hinzufügen von Bootstrap und Jquery beide

npm install [email protected] jquery --save

nachdem Sie diesen Befehl ausgeführt haben, überprüfen Sie bitte den Ordner node_modules, in dem bootstrap und jquery angezeigt werden sollen.

Führen Sie den folgenden Befehl innerhalb des Projekts aus 

npm install --save @[email protected]

und wenn Sie so eine Bestätigung erhalten 

+ [email protected]
updated 1 package in 8.245s

Dies bedeutet, dass boostrap 4 erfolgreich installiert wurde. Um es verwenden zu können, müssen Sie jedoch das "styles" -Array unter der Datei angle.json aktualisieren. 

Aktualisieren Sie es folgendermaßen, damit Bootstrap die vorhandenen Stile überschreiben kann

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

Um sicherzustellen, dass alles korrekt eingerichtet ist, führen Sie 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 aus. Verwenden Sie dann boostrap . . 

Es ist egal, welches JS-Framework Sie verwenden. Der Import von Bootstrap in Ihr Projekt ist einfach, indem Sie die folgenden 2 Schritte ausführen: 

Installieren Sie Bootstrap mit npm i -S bootstrap oder yarn add bootstrap.

Importieren Sie in styles.css oder styles.scss Bootstrap als @import '~bootstrap/dist/css/bootstrap.min.css'.

Habe diesen hier nicht gesehen:

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

Ich habe diese Zeile gerade in style.scss hinzugefügt. In meinem Fall wollte ich auch bootstrap Variablen überschreiben.

1. Installieren Sie Bootstrap mit npm

   npm install bootstrap
   

2.Installieren Sie Popper.js

npm install --save popper.js

3.Goto angle.json in Angular 6 Projekt/ .angular-cli.json in Angular 5 und fügen Sie Folgendes hinzu:

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

Fügen Sie einfach diese drei Zeilen im Head-Tag in index.html hinzu 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ein Beispiel für die Verwendung von angle-cli:

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

Funktioniert für CSS und CSS. Bootstrap v3 und v4 sind verfügbar.

Weitere Informationen zu Bootstrap-Schemata finden Sie hier .

Installieren Sie bootstrap mit npm i --save [email protected]. Wechseln Sie in den Ordner nodemodules. Kopieren Sie den Pfad von 'bootstrap.min.css.js' aus dem Bootstrap-Ordner und fügen Sie den vollständigen Pfad (wie nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json unter der Skript-Tag-Datei ein, und führen Sie den Server erneut aus Um zu überprüfen, ob die Installation erfolgreich ist, führen Sie das Programm in einem beliebigen Browser aus, und drücken Sie die Taste F12. Ein Teil des Fensters wird geöffnet. Gehen Sie nun zum Kopf-Tag der Registerkarte "Reiter" und öffnen Sie Bootstrap im Stil-Tag ist erfolgreich.