wake-up-neo.net

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

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).

185
Jerome

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:

  1. 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.

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

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
    
  2. Ö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"
    ],
    
  3. Ö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'
  }
};
260
pd farhad

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.

99
Nelly Sattari

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"
],
47
mahatmanich

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"
  ]
28
Alberto Viezzi

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.

20
tilo

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.

16
Shigiang Liu

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>
9
shakram02

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

  1. src/app/app.component.html öffnen
  2. 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/ ).

  1. speicher die Datei

  2. 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

7
rashidnk

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

6
Jimmy Kane

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

5
Léger Djiba
  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"
      ],
  1. Fügen Sie zuletzt bootstrap.css zu Ihrem Code style.scss hinzu

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    
  2. Starten Sie Ihren lokalen Server neu

4
Xjw919
3
neoerol
  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" ],
2
srijishks
  1. Installieren Sie bootstrap, popper.js 

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

  1. 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)

2
Nelly Sattari

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.

2
JLS

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"
  ],
1
ilia

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

1

Ö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.

1
Raj Sahoo

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"

1
kireeti9

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 . enter image description here

0
tadtab

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'.

0
Srinivas

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.

0
Andris
  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"
        ]
0
Konvivial

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>
0
tejeswar

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 .

0
Slupek

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.

0
Alekya