Wir möchten Bootstrap 4 (4.0.0-alpha.2) in unserer App verwenden, die mit angle-cli 1.0.0-beta.5 (w/node v6.1.0) erstellt wurde.
Nachdem wir Bootstrap und seine Abhängigkeiten mit npm erhalten hatten, bestand unser erster Ansatz darin, sie in angular-cli-build.js
hinzuzufügen:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
und importiere sie in unseren 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>
Dies funktionierte gut mit ng serve
, aber sobald wir einen Build mit -prod
-Flag erstellt hatten, verschwanden alle diese Abhängigkeiten von dist/vendor
(Überraschung!).
Wie sollen wir mit einem solchen Szenario (d. H. Dem Laden von Bootstrap-Skripts) in einem mit angle-cli erstellten Projekt umgehen?
Wir hatten die folgenden Gedanken, aber wir wissen nicht, welchen Weg wir gehen sollen ...
ein CDN verwenden? Wir würden diese Dateien jedoch lieber bereitstellen, um sicherzustellen, dass sie verfügbar sind
abhängigkeiten in dist/vendor
nach unserem ng build -prod
kopieren? Aber das scheint etwas zu sein, das eckig-cli bieten sollte, da es sich um den Build-Teil "kümmert".
jquery, Bootstrap und Tether in src/system-config.ts hinzufügen und irgendwie in main.ts in unser Bundle ziehen? 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 etwas wie lodash zum Beispiel).
WICHTIGES UPDATE: _ ng2-bootstrap wird jetzt durch ngx-bootstrap ersetzt
ngx-bootstrap unterstützt sowohl Angular 3 als auch 4.
Update: 1.0.0-beta.11-webpack oder höhere Versionen
Überprüfen Sie zunächst Ihre angle-cli -Version mit dem folgenden Befehl im Terminal:
ng -v
Wenn Ihre Version angle-cli größer als 1.0.0-beta.11-webpack ist, sollten Sie die folgenden Schritte ausführen:
Installieren Sie ngx-bootstrap und bootstrap:
npm install ngx-bootstrap bootstrap --save
Diese Zeile installiert heutzutage Bootstrap 3, kann aber zukünftig Bootstrap 4 installieren. Beachten Sie, dass ngx-bootstrap beide Versionen unterstützt.
Öffnen Sie src/app/app.module.ts und fügen Sie Folgendes hinzu:
import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})
Öffnen Sie angle-cli.json und fügen Sie einen neuen Eintrag in das Array styles
ein:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Öffnen Sie src/app/app.component.html und fügen Sie Folgendes hinzu:
<alert type="success">hello</alert>
1.0.0-beta.10 oder darunter Versionen:
Wenn Ihre Version angle-cli _ 1.0.0-beta.10 oder darunter ist, können Sie die folgenden Schritte verwenden.
Gehen Sie zuerst in das Projektverzeichnis und geben Sie Folgendes ein:
npm install ngx-bootstrap --save
Dann öffne deine angle-cli-build.js und füge diese Zeile hinzu:
vendorNpmFiles: [
...
'ngx-bootstrap/**/*.js',
...
]
Öffnen Sie nun Ihre src/system-config.ts und schreiben Sie dann:
const map:any = {
...
'ngx-bootstrap': 'vendor/ngx-bootstrap',
...
}
...und:
const packages: any = {
'ngx-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ngx-bootstrap.js'
}
};
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
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.
Erstellen Sie ein neues Projekt und navigieren Sie in das Projekt
ng new my-app
cd my-app
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
Jetzt, da das Projekt eingerichtet ist, muss es so konfiguriert sein, dass es das Bootstrap-CSS enthält.
.angular-cli.json
im Stammverzeichnis Ihres Projekts.apps
ist das erste Element in diesem Array die Standardanwendung.styles
, mit der externe globale Stile auf Ihre Anwendung angewendet werden können.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.
Ö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.
Erstellen Sie ein neues Projekt und navigieren Sie in das Projekt
ng new my-app --style=scss
cd my-app
# version 3.x
npm install bootstrap-sass --save
# version 4.x
npm install [email protected] --save
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';
Ö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
Erstellen Sie ein Winkelprojekt 5
ng neuer AngularBootstrapTest
Zum Projektverzeichnis wechseln
cd AngularBootstrapTest
Bootstrap herunterladen
npm install bootstrap
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
src/app/app.component.html
öffnen.
<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/ ).
speicher die Datei
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:
npm install --save bootstrap
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
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"
],
Fügen Sie zuletzt bootstrap.css zu Ihrem Code style.scss hinzu
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Starten Sie Ihren lokalen Server neu
Versuche dies
npm install [email protected]
https://github.com/angular/angular-cli#global-library-installation
npm install ng2-bootstrap bootstrap --save
ausangular-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"
],
npm install --save bootstrap
npm install --save popper.js
@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.
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.