Wie verwende ich Bootstrap in einem Angular-Projekt?

Antworten:

119

Vorausgesetzt, Sie verwenden die Angular-CLI , um neue Projekte zu generieren, gibt es eine andere Möglichkeit, Bootstrap in Angular 2/4 zugänglich zu machen .

  1. Navigieren Sie über die Befehlszeilenschnittstelle zum Projektordner. Verwenden Sie dann npm , um den Bootstrap zu installieren :
    $ npm install --save bootstrap. Mit dieser --saveOption wird Bootstrap in den Abhängigkeiten angezeigt.
  2. Bearbeiten Sie die Datei .angular-cli.json, mit der Ihr Projekt konfiguriert wird. Es befindet sich im Projektverzeichnis. Fügen Sie dem "styles"Array einen Verweis hinzu . Die Referenz muss der relative Pfad zu der mit npm heruntergeladenen Bootstrap-Datei sein. In meinem Fall ist es:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Mein Beispiel .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Jetzt sollte Bootstrap Teil Ihrer Standardeinstellungen sein.

— LaPriWa
quelle
1
Ich denke, bootstrap.min.js sollte auch in dieser Lösung zu den "Skripten" hinzugefügt werden. Sind Sie einverstanden?
— Hamalaiv
1
@hamalaiv Dies ist zumindest nicht obligatorisch.
— LaPriWa
3
Ich habe Bootstrap mit Schritt 1 installiert und dann @import "../node_modules/bootstrap/dist/css/bootstrap.min.css" eingefügt. in meiner src / styles.css-Datei, wie im folgenden Beitrag beschrieben . stackoverflow.com/a/40054193/3777549 . Schritt 2 in diesem Beitrag war für mich nicht notwendig, ich benutze @
— angle
77

Eine Integration mit Angular2 ist auch über das ng2-bootstrap- Projekt verfügbar : https://github.com/valor-software/ng2-bootstrap .

Um es zu installieren, fügen Sie einfach diese Dateien in Ihre HTML-Hauptseite ein:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Dann können Sie es folgendermaßen in Ihre Komponenten einbauen:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
— Thierry Templier
quelle
1
Wenn Sie die ng2-Bootstrap-Version verwenden, sollten Sie dann nicht das mitgelieferte CSS verwenden? Ich bin mir nicht sicher, warum Sie das CDN-CSS verwenden würden, oder soll es so gemacht werden? Ich bin auch neu darin.
— Stephen York
6
New angle2 hat keine Direktive in @component
— Master Yoda
38

Alles, was Sie tun müssen, ist, das Boostrap-CSS in Ihre index.html-Datei aufzunehmen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
— user2263572
quelle
1
Gibt es eine Möglichkeit, es aus der lokalen Ressource anstelle von CDN aufzunehmen?
— SparK
1
Ja, href sollte nur auf den Pfad Ihrer lokalen Datei eingestellt werden. Wenn Sie Probleme haben, würde ich vorschlagen, nach "Serving Static File" von jedem Webserver zu suchen, den Sie verwenden.
— user2263572
Es funktioniert nicht mit Angular 6+ für andere Dateien als index.html. z.B. app.component.html. bitte erzähle.
— Ganeshdeshmukh
16

Wenn Sie Bootstrap 4 verwenden möchten, das für den in diesem Thread erwähnten ng-bootstrap des Angular-UI-Teams erforderlich ist, sollten Sie diesen stattdessen verwenden (HINWEIS: Sie müssen die JS-Datei nicht einschließen):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Sie können dies auch lokal nach dem Ausführen referenzieren , indem Sie npm install bootstrap@4.0.0-alpha.6 --saveauf die Datei in Ihrer styles.scssDatei zeigen, vorausgesetzt, Sie verwenden SASS:

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
— gelegentlich
quelle
1
Können Sie bitte erklären, warum Sie die JS-Datei nicht einschließen müssen? Ist es, weil NPM es installiert? In Thierry Templiers Beispiel importiert er außerdem ng2-bootstrap / ng2-bootstrap, um eine Warnung zu verwenden. Ist die Nutzung dort für Bootstrap 4 gleich?
— BBaysinger
Vielen Dank. Ich habe dein zweites Beispiel ausprobiert. Ich habe eine Fehlermeldung erhalten, dass die Ressource nicht aus node_modules geladen werden konnte.
— BBaysinger
1
Siehe aktualisierte Antwort. Wenn Sie SASS verwenden, können Sie einfach das tun, was ich getan habe, und @importes in Ihre SASS-Datei einfügen. Wenn nicht, können Sie versuchen, es Ihrer vendor.tsDatei hinzuzufügen , aber ich verwende das nicht in meinem Code.
— gelegentlich
10

Die beliebteste Option ist die Verwendung einer Bibliothek eines Drittanbieters, die als npm-Paket verteilt wird, wie z. B. das ng2-Bootstrap-Projekt https://github.com/valor-software/ng2-bootstrap oder die Angular UI Bootstrap-Bibliothek.

Ich persönlich benutze ng2-bootstrap. Es gibt viele Möglichkeiten, es zu konfigurieren, da die Konfiguration davon abhängt, wie Ihr Angular-Projekt erstellt wird. Darunter poste ich eine Beispielkonfiguration basierend auf dem Angular 2 QuickStart-Projekt https://github.com/angular/quickstart

Zunächst fügen wir Abhängigkeiten in unsere package.json ein

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Dann müssen wir den richtigen URLs in systemjs.config.js Namen zuordnen

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Wir müssen die Bootstrap-CSS-Datei in index.html importieren. Wir können es aus dem Verzeichnis / node_modules / bootstrap auf unserer Festplatte (weil wir die Abhängigkeit von Bootstrap 3.3.7 hinzugefügt haben) oder aus dem Internet herunterladen. Dort erhalten wir es aus dem Internet:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Wir sollten unsere Datei app.module.ts aus dem Verzeichnis / app bearbeiten

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Und schließlich unsere Datei app.component.ts aus dem Verzeichnis / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Dann müssen wir unsere Bootstrap- und ng2-Bootstrap-Abhängigkeiten installieren, bevor wir unsere App ausführen. Wir sollten in unser Projektverzeichnis gehen und eingeben

npm install

Endlich können wir unsere App starten

npm start

Es gibt viele Codebeispiele auf ng2-bootstrap project github, die zeigen, wie ng2-bootstrap in verschiedene Angular 2-Projektbuilds importiert wird. Es gibt sogar plnkr Probe. Es gibt auch eine API-Dokumentation auf der Valor-Software-Website (Autoren der Bibliothek).

— Luke
quelle
9

In einer Winkel-Cli-Umgebung ist der einfachste Weg, den ich gefunden habe, der folgende:


1. Lösung in einer Umgebung mit s̲c̲s̲s̲-Stylesheets

npm install bootstrap-sass —save

In style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Hinweis 1: Das ~Zeichen verweist auf den Ordner node_modules .
Hinweis 2: Da wir scss verwenden, können wir alle gewünschten Boostrap-Variablen anpassen.


2. Lösung in einer Umgebung mit c̲s̲s̲-Stylesheets

npm install bootstrap —save

In style.css:

@import '~bootstrap/dist/css/bootstrap.css';
— Michael P. Bazos
quelle
6

Es gibt verschiedene Möglichkeiten, angle2 mit Bootstrap zu konfigurieren. Eine der vollständigsten Möglichkeiten, das Beste daraus zu machen, ist die Verwendung von ng-bootstrap. Mit dieser Konfiguration geben wir algular2 die vollständige Kontrolle über unser DOM, ohne dass JQuery und Boostrap verwendet werden müssen .js.

1-Nehmen Sie als Ausgangspunkt ein neues Projekt, das mit Angular-CLI erstellt wurde, und installieren Sie ng-bootstrap über die Befehlszeile:

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

Hinweis: Weitere Informationen unter https://ng-bootstrap.github.io/#/getting-started

2-Dann müssen wir Bootstrap für das CSS und das Grid-System installieren.

npm install bootstrap@4.0.0-beta.2 --save

Hinweis: Weitere Informationen unter https://getbootstrap.com/docs/4.0/getting-started/download/

Jetzt haben wir die Umgebung eingerichtet und dafür müssen wir die .angular-cli.json ändern, die dem Stil hinzugefügt wird:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Hier ist ein Beispiel:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

Der nächste Schritt ist das Hinzufügen des ng-boostrap-Moduls zu unserem Projekt. Dazu müssen wir die Datei app.module.ts hinzufügen:

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

Fügen Sie dann das neue Modul zur Anwendungs-App hinzu: NgbModule.forRoot ()

Beispiel:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Jetzt können wir bootstrap4 für unser angle2 / 5-Projekt verwenden.

— UHDante
quelle
3

Ich hatte die gleiche Frage und fand diesen Artikel mit einer wirklich sauberen Lösung:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Hier sind die Anweisungen, aber mit meiner vereinfachten Lösung:

Installieren Sie Bootstrap 4 ( Anweisungen ):

npm install --save bootstrap@4.0.0-alpha.6

Benennen Sie bei Bedarf Ihre src / styles.css in styles.scss um und aktualisieren Sie .angular-cli.json , um die Änderung widerzuspiegeln:

"styles": [
  "styles.scss"
],

Fügen Sie diese Zeile dann zu styles.scss hinzu :

@import '~bootstrap/scss/bootstrap';
— jared_flack
quelle
3

Überprüfen Sie einfach Ihre package.json-Datei und fügen Sie Abhängigkeiten für Bootstrap hinzu

"dependencies": {

   "bootstrap": "^3.3.7",
}

Fügen Sie dann den folgenden Code in die .angular-cli.jsonDatei ein

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

Schließlich aktualisieren Sie einfach Ihre npm lokal mithilfe des Terminals 

$ npm update
— Tanjeeb Ahsan
quelle
2
  1. npm install - Bootstrap speichern

  2. Gehen Sie zu -> angle-cli.json , suchen Sie die Stileigenschaften und fügen Sie einfach den nächsten Stich hinzu: "../node_modules/bootstrap/dist/css/bootstrap.min.css". Es könnte so aussehen:

    "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
— 31113
quelle
2

Vorgehensweise mit Angular 6+ & Bootstrap 4+:

  1. Öffnen Sie eine Shell im Ordner Ihres Projekts
  2. Installieren Sie den Bootstrap mit dem folgenden Befehl: npm install --save bootstrap@4.1.3
  3. Bootstrap benötigt die Abhängigkeits-Abfrage. Wenn Sie sie nicht haben, können Sie sie mit dem folgenden Befehl installieren: npm install --save jquery 1.9.1
  4. Möglicherweise müssen Sie die Sicherheitsanfälligkeit mit dem folgenden Befehl beheben: npm audit fix
  5. Fügen Sie in Ihrer Hauptdatei style.scss die folgende Zeile hinzu: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ODER

Fügen Sie diese Zeile Ihrer Hauptdatei index.html hinzu: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

— veben
quelle
1

Meine Empfehlung wäre, anstatt es im json-Stift zu deklarieren, es in das scss zu legen, damit alles kompiliert und an einem Ort ist.

1) Installieren Sie den Bootstrap mit npm

 npm install bootstrap

2) Deklarieren Sie Bootstrap npm im CSS mit unseren Styles

Erstellen _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) In die Datei styles.scss fügen wir ein

@import "bootstrap-custom";

So werden wir unseren gesamten Kern an einem Ort zusammenstellen

— JMF
quelle
0

Fügen Sie die folgenden Zeilen in Ihre HTML-Seite ein

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

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

Wenn Sie Angular Cli verwenden, nachdem Sie Bootstrap in package.json hinzugefügt und das Paket installiert haben, müssen Sie nur boostrap.min.css in den Abschnitt "styles" von .angular-cli.json einfügen.

Eine wichtige Sache ist: "Wenn Sie Änderungen an .angular-cli.json vornehmen, müssen Sie ng serve neu starten, um Konfigurationsänderungen zu erfassen."

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

— Neuniger
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.