webentwicklung-frage-antwort-db.com.de

Wie füge ich bootstrap in angular 6 Projekt hinzu?

app.component.html

index.html

app.component.ts Ich habe versucht, eine Stilabhängigkeit im angle.json-Paket hinzuzufügen, aber gezeigt, dass das Modul nicht gefunden wurde. Hinzufügen von zwei der bootstrap Dateien. Hier ist der Screenshot beider Dateien

die angle.json-Datei sieht folgendermaßen aus: angle.json-Datei

javascripthtmlangularangular-ui-bootstrap
33
nikhil sugandh

Sie verwenden Angular v6 nicht 2

Angular v6 Onwards

CLI-Projekte ab angular 6 verwenden angular.json anstelle von .angular-cli.json für die Erstellung und Projektkonfiguration.

Jeder CLI-Arbeitsbereich hat Projekte, jedes Projekt hat Ziele und jedes Ziel kann Konfigurationen haben. Docs

. {
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

OPTION-1
npm install [email protected] jquery --save ausführen
Die JavaScript-Teile von Bootstrap sind abhängig von jQuery. Sie benötigen also auch die Bibliotheksdatei jQueryJavaScript.

Fügen Sie in Ihrem angle.json die Dateipfade zum Styles- und Scripts-Array unter build target hinzu
HINWEIS: Vor v6 wurde die Angular CLI-Projektkonfiguration in <PATH_TO_PROJECT>/.angular-cli.json. ab v6 gespeichert Speicherort der Datei geändert in angular.json. Da kein führender Punkt mehr vorhanden ist, ist die Datei standardmäßig nicht mehr ausgeblendet und befindet sich auf derselben Ebene.
was auch bedeutet, dass Dateipfade in angle.json keine führenden Punkte und Schrägstriche enthalten sollten

sie können also einen absoluten Pfad anstelle eines relativen Pfads angeben

In .angular-cli.json war der Pfad "../node_modules/"
In angular.json ist es "node_modules/"

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"

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

OPTION 2
Fügen Sie Ihrem Projekt Dateien von CDN (Content Delivery Network) hinzu CDN LINK

Öffnen Sie die Datei src/index.html und fügen Sie sie ein

das <link> -Element am Ende des head-Abschnitts, um die Bootstrap CSS-Datei einzuschließen
Ein <script> -Element, das jQuery am unteren Rand des Hauptteils enthält
Ein <script> -Element, das Popper.js am unteren Rand des Hauptteils enthält
Ein <script> Element, das die Bootstrap JavaScript-Datei am unteren Rand des Body-Abschnitts enthält

  <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Angular</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
      <app-root>Loading...</app-root>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    </html>

OPTION 3
npm install bootstrap ausführen
Fügen Sie in src/styles.css die folgende Zeile ein:

@import "~bootstrap/dist/css/bootstrap.css";

OPTION-4
ng-bootstrap Enthält eine Reihe nativer Angular-Direktiven, die auf Bootstraps basieren Markup und CSS. Daher ist es nicht abhängig von jQuery oder dem JavaScript von Bootstrap

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

Importiere es nach der Installation in dein Root-Modul und registriere es im Array @NgModuleImports`

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

NOTE
ng-bootstrap erfordert, dass Bootstraps 4 CSS in Ihrem Projekt hinzugefügt werden. Sie müssen es explizit installieren über:
npm install [email protected] --save Fügen Sie in Ihrem angle.json die Dateipfade zum Styles-Array unter build target hinzu

   "styles": [
                  "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
124
Vikas
npm install --save bootstrap

suchen Sie anschließend in angular.json (zuvor .angular-cli.json) im Stammverzeichnis des Projekts nach Formatvorlagen und fügen Sie die bootstrap CSS-Datei wie folgt hinzu:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],
9
jayant mishra
npm install bootstrap --save

fügen Sie relevante Dateien in die Datei angular.json unter der Eigenschaft style für CSS-Dateien und unter scripts für JS-Dateien ein.

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

using befehl

    npm install bootstrap --save

open . angular.json old (. angular-cli.json) file find the " "Stile" fügen Sie die CSS-Datei bootstrap hinzu

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