Как добавить бутстрап в угловом проекте?

app.component.html

app.component.ts Я попытался добавить зависимость стилей в пакете angular.json, но показывая, что модуль не найден. добавление двух файлов начальной загрузки. вот скриншот обоих файлов

файл angular.json похож на этот файл angular.json

Ответ 1

Вы используете Angular v6 not 2

Угловой v6 Вперед

Проекты CLI с угловым 6 вперед будут использовать angular.json вместо .angular-cli.json для сборки и конфигурации проекта.

Каждое рабочее пространство CLI имеет проекты, у каждого проекта есть цели, и каждая цель может иметь конфигурации. Документы

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

ОПЦИЯ 1
выполнить npm install [email protected] jquery --save
Части JavaScript в Bootstrap зависят от jQuery. Таким образом, вам также нужен файл библиотеки jQuery JavaScript.

В вашем angular.json добавьте пути к файлу в массив стилей и скриптов в рамках цели build
ПРИМЕЧАНИЕ. Перед v6 конфигурация проекта Угловая CLI была сохранена в <PATH_TO_PROJECT>/.angular-cli.json. С v6 местоположение файла изменилось на angular.json. Поскольку больше нет ведущей точки, файл больше не скрывается по умолчанию и находится на одном уровне.
что также означает, что пути файла в angular.json не должны содержать ведущие точки и слэш

т.е. вы можете предоставить абсолютный путь вместо относительного пути

В .angular-cli.json Path был "../node_modules/"
В angular.json это "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"]
          },

ВАРИАНТ 2
Добавьте файлы из CDN (Сеть доставки контента) в свой проект CDN LINK

Откройте файл src/index.html и вставьте

элемент <link> в конце главы, чтобы включить файл Bootstrap CSS
a <script> чтобы включить jQuery в нижней части части тела
a <script> чтобы включить Popper.js в нижней части части тела
a <script> чтобы включить файл JavaScript Bootstrap в нижней части части тела

  <!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>

ВАРИАНТ 3
Выполнить npm install bootstrap
В src/styles.css добавьте следующую строку:

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

ВАРИАНТ-4
ng-bootstrap Он содержит набор собственных угловых директив на основе разметки Bootstraps и CSS. В результате он не зависит от jQuery или Bootstraps JavaScript

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

После установки импортируйте его в свой корневой модуль и зарегистрируйте его в @NgModule

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

НОТА
ng-bootstrap требует, чтобы Bootstrap 4 css добавлялся в ваш проект. вам нужно установить его явно через:
npm install [email protected] --save В вашем angular.json добавить пути к файлу в массив стилей в рамках цели build

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

Ответ 2

npm install --save bootstrap

впоследствии, внутри angular.json (ранее .angular-cli.json) внутри корневой папки проекта, найдите стили и добавьте файл начальной загрузки css следующим образом:

для angular 6

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

для angular 7

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

Ответ 3

npm install bootstrap --save

и добавить соответствующие файлы в файл angular.json под свойством style для файлов css и под scripts для JS файлов.

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

Ответ 4

используя команду

    npm install bootstrap --save

откройте .angular.json старый (.angular-cli.json) файл, найдите "стили", добавьте файл начальной загрузки css

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