Как добавить Bootstrap 4 на угловой

В этой статье я буду объяснять только один метод, потому что он работал для меня, там так много других методов Но я буду только говорить о том, что работал для меня.

Я добавлю несколько полезных ресурсов ниже этого поста, если вам не нравится этот подход, или вам нужны другие методы.

Я верю, прежде чем вы сможете подумать об использовании Bootstrap на угловой, вы должны установить угловой на ваш компьютер и создал новый проект.

Если вы не знаете, как установить угловой или настроить новый проект, вы можете проверить Угловая документация .

Начиная

• Установите Bootstrap из NPM, используя NPM установить команда

$ npm install --save bootstrap

--save помогает вам сохранить Bootstrap в качестве зависимости

• Вам также нужно будет установить jQuery, используя следующую команду

$ npm install --save jquery

При этом, если вы перейдите к папке Node_Modules, прокрутите вниз, вы найдете наступление там.

Наконец, мы должны добавить Bootstrap на ** Angular.json * файл*

Открыть angular.json Файл вашего проекта и включить:

• node_modules/bootstrap/dist/css/bootstrap.css в Стили множество,
• node_modules/bootstrap/dist/js/bootstrap.js в скрипты множество,
• node_modules/bootstrap/dist/js/bootstrap.js в Скрипты множество.

Пример:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": {
    "angular-bootstrap-examples": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-bootstrap-examples",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"              
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          },

Однажды это сделано, пойти на SRC/styles.css вашего углового проекта и импортировать bootstrap.css файл следующим образом:

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

Как будто я сказал раньше, это то, что работало для меня, обычно вы можете назвать что-то вроде этого в вашем index.html файл

Но когда я сделал это, я получил ошибку.

Спасибо за чтение. Давайте узнаем себя лучше, связывайтесь со мной на Twitter Отказ

Полезные ресурсы

• 3+ способа добавить Bootstrap 4 на угловые 9/8 С примером и учебником
• Использование Bootstrap с угловым

Оригинал: “https://dev.to/olawanle_joel/how-to-add-bootstrap-4-to-angular-14oj”