Wir möchten Bootstrap 4 (4.0.0-alpha.2) in unserer App verwenden, die mit angle-cli 1.0.0-beta.5 (mit Node v6.1.0) generiert wurde.

Nachdem wir Bootstrap und seine Abhängigkeiten mit npm erhalten hatten, bestand unser erster Ansatz darin, sie hinzuzufügen in angular-cli-build.js:

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

und importieren sie in unsere 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>

Das hat gut funktioniert, ng serveaber sobald wir einen Build mit -prodFlag erstellt haben, sind alle diese Abhängigkeiten verschwunden dist/vendor(Überraschung!).

Wie sollen wir mit einem solchen Szenario (dh Laden von Bootstrap-Skripten) in einem mit angle-cli generierten Projekt umgehen?

Wir hatten die folgenden Gedanken, aber wir wissen nicht wirklich, welchen Weg wir gehen sollen ...

• ein CDN verwenden? Wir möchten diese Dateien jedoch lieber bereitstellen, um sicherzustellen, dass sie verfügbar sind

• Kopieren Sie Abhängigkeiten dist/vendornach unserem ng build -prod? Aber das scheint etwas zu sein, das Angular-Cli bieten sollte, da es sich um den Build-Teil kümmert?

• JQuery, Bootstrap und Tether hinzufügen src/system-config.tsund sie irgendwie in unser Bundle ziehen main.ts? Aber das schien falsch zu sein, wenn man bedenkt, dass wir sie nicht explizit im Code unserer Anwendung verwenden werden (im Gegensatz zu moment.js oder so etwas wie lodash zum Beispiel).

WICHTIGES UPDATE: ng2-bootstrap wird jetzt durch ngx-bootstrap ersetzt

ngx-bootstrap unterstützt sowohl Angular 3 als auch Angular 4.

Update: 1.0.0-beta.11-webpack oder höher

Überprüfen Sie zunächst Ihre Angular-Cli- Version mit dem folgenden Befehl im Terminal:

ng -v

Wenn Ihre Angular-Cli - Version größer als 1.0.0-Beta.11-Webpack ist , sollten Sie die folgenden Schritte ausführen :

1. Installieren Sie ngx-bootstrap und bootstrap :

   npm install ngx-bootstrap bootstrap --save

Diese Zeile installiert heutzutage Bootstrap 3, kann aber in Zukunft Bootstrap 4 installieren. Beachten Sie, dass ngx-bootstrap beide Versionen unterstützt.

2. Öffnen Sie src / app / app.module.ts und fügen Sie hinzu:

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

3. Öffnen Sie angular-cli.json (für Angular6 und höher wurde der Dateiname in angular.json geändert ) und fügen Sie einen neuen Eintrag in das stylesArray ein:

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

4. Öffnen Sie src / app / app.component.html und fügen Sie hinzu:

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

1.0.0-beta.10 oder niedrigere Versionen:

Wenn Ihre Angular-Cli - Version 1.0.0-beta.10 oder niedriger ist , können Sie die folgenden Schritte ausführen .

Gehen Sie zuerst zum Projektverzeichnis und geben Sie Folgendes ein:

npm install ngx-bootstrap --save

Öffnen Sie dann Ihre angle-cli-build.js und fügen Sie diese Zeile hinzu:

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

Öffnen Sie nun Ihre src / system-config.ts und schreiben Sie:

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

...und:

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

Wenn Sie unter https://github.com/angular/angular-cli nach dem Schlüsselwort> Global Library Installation suchen, finden Sie die Antwort.

Gemäß dem Dokument können Sie die folgenden Schritte ausführen, um die Bootstrap-Bibliothek hinzuzufügen.

Installieren Sie zuerst Bootstrap von npm:

npm install bootstrap@next

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

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

Fügen Sie abschließend das Bootstrap-CSS zum Array "apps [0] .styles" hinzu:

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

Starten Sie ng serve neu, wenn Sie es ausführen, und Bootstrap 4 sollte auf Ihrer App funktionieren.

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

Mach Folgendes:

npm i bootstrap@next --save

Dadurch wird Ihrem Projekt Bootstrap 4 hinzugefügt.

Gehen Sie als nächstes zu Ihrer src/style.scssoder src/style.css-Datei (wählen Sie, welche Sie verwenden) und importieren Sie dort den 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 weiterhin wie folgt in die Datei angle -cli.json einfügen ( In Angular Version 6 muss diese Bearbeitung in der Datei angle.json durchgeführt werden ) :

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

Zunächst müssen Sie mit diesen Befehlen Tether, JQuery und Bootstrap installieren

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

Nachdem Sie diese Zeilen in Ihre Datei angle-cli.json (angle.json ab Version 6) eingefügt haben

  "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 (Angular-Cli-Team) bezog, wie Bootstrap aufgenommen werden soll: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Bootstrap einschließen

Bootstrap ist ein beliebtes CSS-Framework, das in einem Angular-Projekt verwendet werden kann. In diesem Handbuch erfahren Sie, wie Sie Ihrem Angular CLI-Projekt Bootstrap hinzufügen und es für die Verwendung von Bootstrap konfigurieren.

Verwenden von CSS

Loslegen

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 --saveOption wird die Abhängigkeit in package.json gespeichert

# version 3.x
npm install bootstrap --save

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

Projekt konfigurieren

Nachdem das Projekt eingerichtet wurde, muss es so konfiguriert werden, dass es das Bootstrap-CSS enthält.

• Öffnen Sie die Datei .angular-cli.jsonim Stammverzeichnis Ihres Projekts.
• Unter der Eigenschaft ist appsdas 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 an bootstrap.min.css

Wenn Sie fertig sind, sollte es wie folgt aussehen:

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

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

Testprojekt

Öffnen app.component.htmlSie das folgende Markup und fügen Sie es hinzu:

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

ng serveFühren Sie die konfigurierte Anwendung aus, um Ihre Anwendung im Entwicklungsmodus auszuführen. Navigieren Sie in Ihrem Browser zur Anwendung localhost:4200. Stellen Sie sicher, dass die Schaltfläche im Bootstrap-Stil angezeigt wird.

Verwenden von SASS

Loslegen

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 bootstrap@next --save

Projekt konfigurieren

Erstellen Sie eine leere Datei _variables.scssin src/.

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

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

In styles.scssfügen Sie die folgende:

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

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

Testprojekt

Öffnen app.component.htmlSie das folgende Markup und fügen Sie es hinzu:

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

ng serveFühren Sie die konfigurierte Anwendung aus, um Ihre Anwendung im Entwicklungsmodus auszuführen. Navigieren Sie in Ihrem Browser zur Anwendung localhost:4200. Stellen Sie sicher, dass die Schaltfläche im Bootstrap-Stil angezeigt wird. Um sicherzustellen, dass Ihre Variablen verwendet werden, öffnen Sie _variables.scssund fügen Sie Folgendes hinzu:

$brand-primary: red;

Geben Sie den Browser zurück, um zu sehen, dass sich die Schriftfarbe geändert hat.

Update v1.0.0-beta.26

Sie können für die neue Art und Weise auf der doc sehen für den Import von Bootstrap hier

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

1.0.0 oder niedrigere Versionen:

In Ihrer index.html-Datei benötigen Sie lediglich einen Bootstrap-CSS-Link (keine JS-Skripte 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 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'
  }
};

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

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

Vergessen Sie diesen Befehl nicht, um Ihr Modul in den Hersteller zu stellen:

ng build

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

Ich denke, die oben genannten Methoden haben sich nach der Veröffentlichung geändert. Schauen Sie sich diesen Link an

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

Installieren Sie ng-bootstrap und bootstrap

npm install ng2-bootstrap bootstrap --save

Öffnen Sie src / app / app.module.ts und fügen Sie hinzu

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

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

Öffnen Sie angle-cli.json und fügen Sie einen neuen Eintrag in das Styles-Array ein

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

Öffnen Sie src / app / app.component.html und testen Sie alle Funktionen durch Hinzufügen

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

Schritte für Bootstrap 4 in Winkel 5

1. Erstellen Sie ein Angular 5-Projekt

   ng neuer AngularBootstrapTest

2. In das Projektverzeichnis wechseln

   cd AngularBootstrapTest

3. Laden Sie den Bootstrap herunter

   npm install bootstrap

4. Fügen Sie Bootstrap zum Projekt hinzu

   4.1 Öffnen Sie .angular-cli.json

   4.2 Finden Sie den Abschnitt "Stile" 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 das Bootstrap-CSS in Angular 5-Projekt erfolgreich hinzugefügt

Testen Sie den Bootstrap

5. öffnen src/app/app.component.html
6. Bootstrap-Schaltflächenkomponente hinzufügen

.

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

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

7. Speicher die Datei

8. Führen Sie das Projekt aus

   ng dienen - öffnen

Jetzt sehen Sie die Bootstrap-Schaltfläche auf der Seite

Hinweis: Wenn Sie nach dem ng-Dienst einen Bootstrap-Pfad hinzugefügt haben , müssen Sie den ng-Dienst stoppen und erneut ausführen, um die Änderungen wiederzugeben

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

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

Zitat aus der Bibliothek:

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

Wie bei Bootstrap 4 ist diese Bibliothek in Arbeit. Bitte überprüfen Sie unsere Liste der Probleme, um alle Dinge zu sehen, die wir implementieren. Fühlen Sie sich frei, dort Kommentare abzugeben.

Kopieren Sie einfach das Einfügen, was da 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 einen ähnlichen Code erhalten sollten (siehe NgbModule.forRoot ()):

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 einfach NgbModule importieren:

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

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

Dies scheint bei weitem das beständigste Verhalten zu sein

1. Installieren Sie den Bootstrap

   npm install bootstrap@next

2. Fügen Sie 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

Führen Sie die folgenden Schritte aus:

1. npm install --save bootstrap

2. Fügen Sie in Ihrer .angular-cli.json-Datei zum Abschnitt "Stile" hinzu:

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

Danach müssen Sie Ihren ng-Aufschlag neu starten

Genießen

1. Installieren Sie Bootstrap mit npm

   npm install bootstrap

2.Installieren Sie Popper.js

npm install --save popper.js

3.Gehen Sie zu Angular.json in Angular 6 project / .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"
        ]

Versuche dies

npm install bootstrap@next

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

Sie können sich auch dieses Video 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)

1. In Bash laufen npm install ng2-bootstrap bootstrap --save
2. Fügen Sie Folgendes hinzu / ändern Sie es 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" ],

Öffnen Sie Terminal / Eingabeaufforderung im jeweiligen Projektverzeichnis und geben Sie den folgenden Befehl ein.

npm install --save bootstrap

Öffnen Sie dann die Datei .angular-cli.json und suchen Sie nach

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

ändere das auf

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

Alles erledigt.

Jetzt mit neu Version ng-bootstrap 1.0.0-beta.5 werden jetzt die meisten nativen Angular-Anweisungen unterstützt, die auf dem Markup und dem CSS von Bootstrap basieren.

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

ng-bootstrap soll die JavaScript-Implementierung für Komponenten vollständig ersetzen. Sie müssen also nicht einschließenbootstrap.min.js 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.cssin Ihren Abschnitt .angular-cli.json, Stile ein.

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

• Installieren Sie die 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';

• Nehmen Sie Folgendes in Ihren Abschnitt zum Importieren von Hauptmodulen auf.

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

• Führen Sie die folgenden Schritte auch in Ihren Submodulen aus, wenn Sie ng-bootstrap-Komponenten in diesen Modulklassen verwenden möchten.

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

• Jetzt ist Ihr Projekt bereit, verfügbare ng-bootstrap-Komponenten zu verwenden.

1. Installieren Sie bootstrap, popper.js

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

3. Importieren Sie in src / styles.css den Bootstrap-Stil

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

Schritt 1:
npm install bootstrap@latest --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 hinzu @import "~bootstrap/dist/css/bootstrap.css"

Zum Hinzufügen von Bootstrap und Jquery

npm install bootstrap@3 jquery --save

Nachdem Sie diesen Befehl ausgeführt haben, überprüfen Sie bitte Ihren Ordner node_modules, in dem Bootstrap und JQuery angezeigt werden sollen.

angular-cliJetzt gibt es eine eigene Wiki-Seite, auf der Sie alles finden, was Sie brauchen. TLDR, installieren Sie bootstrapüber npmund fügen Sie den Link "Stile" zum Abschnitt "Stile" in Ihrer .angular-cli.jsonDatei hinzu

Arbeitsbeispiel bei Verwendung von Angular-Cli und CSS:

1. Installieren Sie den Bootstrap

npm install bootstrap tether jquery --save

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

Installieren Sie Boostrap mit npm

npm install boostrap@next --save

Überprüfen Sie dann Ihren Ordner node_modules auf die Datei boostrap.css (innerhalb von dist). Normalerweise lautet der Pfad

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

füge diesen Pfad hinzu | Importieren Sie Boostrap in style.css oder style.scss

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

das ist es.

Führen Sie den folgenden Befehl im Projekt aus

npm install --save @bootsrap@4

und wenn Sie eine solche Bestätigung erhalten

+ bootstrap@4.1.3
updated 1 package in 8.245s

Dies bedeutet, dass Boostrap 4 erfolgreich installiert wurde. Um es jedoch verwenden zu können, müssen Sie das Array "styles" 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 richtig eingerichtet ist, führen 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 belowSie es aus. Dann können Sie Boostrap verwenden.

Hab das 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.

Wenn Sie gerade mit Angular und Bootstrap begonnen haben, lautet die einfache Antwort wie folgt: 1. Fügen Sie das Knotenpaket von Bootstrap als Entwicklungsabhängigkeit hinzu

npm install --save bootstrap

2. Importieren Sie das Bootstrap-Stylesheet in die Datei angle.json.

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

3. und Sie können Bootstrap für Styling, Grid usw. verwenden.

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

Das Beste daran war, dass wir mithilfe von Bootstrap ohne Modulabhängigkeit von Drittanbietern Regie führen. Wir können Bootstrap jederzeit aktualisieren, indem wir nur den Befehl npm install --save [email protected]usw. aktualisieren .

Sie haben viele Möglichkeiten, Bootstrap 4 in Ihr Angular-Projekt einzufügen :

• Einfügen der Bootstrap-CSS- und JavaScript-Dateien in den Abschnitt der Datei index.html Ihres Angular-Projekts mit einem und Tags.

• Importieren der Bootstrap-CSS-Datei in die globale Datei styles.css Ihres Angular-Projekts mit dem Schlüsselwort @import.

• Hinzufügen der Bootstrap-CSS- und JavaScript-Dateien zu den Styles- und Scripts-Arrays der Datei angle.json Ihres Projekts

Führen Sie diesen Befehl aus

npm install bootstrap@3

Ihr Angular.json

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

Sie können Bootstrap mit dem npm install bootstrapBefehl eckig installieren .

und nächster Setup-Bootstrap-Pfad in angular.jsonDatei und style.cssDatei.

Sie können einen vollständigen Blog über die Installation und Einrichtung von Bootstrap in Angular lesen. Klicken Sie hier, um den vollständigen Blog darüber zu lesen

Ein Arbeitsbeispiel für die Verwendung von Angular-Cli:

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

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

Weitere Informationen zu Bootstrap-Schaltplänen finden Sie hier .