Приложение Angular не включает внешние библиотеки

Итак, я новичок в Angular, и я установил загрузку с npm в node_modules проекта. Я не знаю почему, но время от времени, когда я работаю над своим проектом, приложение «запускает» эту вещь о том, чтобы не включать загрузочную программу и другие внешние библиотеки. Я работаю с Visual Studio Code, хотя не думаю, что это важно. вот мой angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Event": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Event",
            "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"
            ],
            "scripts": [

            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Event:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Event:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Event:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "Event-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Event:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Event:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Event"
}

Мой package.json:

{
  "name": "eventim", 
  "version": "1.0.0",
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.2.",
  "main": "index.js",
  "dependencies": {
    "protractor": "^5.4.0",
    "bootstrap": "^4.1.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/AmitBL/event-planner.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/AmitBL/event-planner#readme"
}

Если у кого-то есть идеи, чем это вызвано, буду признателен. Спасибо.

Это происходит каждый раз или случайно? Как вы получаете доступ к начальной загрузке в своем проекте? Просто установить пакет начальной загрузки недостаточно. Вам также необходимо сослаться на файл начальной загрузки css.

byj 06.08.2018 00:09

Да, это случается случайно, два часа назад проект был в порядке, а знаю, что нет. И где мне ссылаться на файл начальной загрузки css?

AmitBL 06.08.2018 00:10

Включите загрузочный css в angular.json в массив "стилей" ИЛИ импортируйте его в src / styles.css с помощью @import '~bootstrap/dist/css/bootstrap.min.css';.

byj 06.08.2018 00:15

Что ж, @import '~bootstrap/dist/css/bootstrap.min.css'; работает, но мне любопытно, почему angular.json не включен. В angular.json есть два массива "стилей". Я попытался добавить его к ним обоим, и безуспешно.

AmitBL 06.08.2018 00:23

В angular.json вы должны указать путь node_modules. попробуйте node_modules/bootstrap/dist/css/bootstrap.min.css. Его просто нужно включить в массив "стилей" конфигурации сборки.

byj 06.08.2018 00:27

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

AmitBL 06.08.2018 00:31

Что ж, я не вижу причин, по которым это не должно работать. Проверьте конфиг в этом Stackblitz образец

byj 06.08.2018 00:37

Точно так же, все равно не работает. Я предполагаю, что angular.json как-то поврежден?

AmitBL 06.08.2018 00:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
8
191
1

Ответы 1

Вы должны объявить стиль начальной загрузки в вашем angular.json в существующем массиве стили

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

не работает, так что расстраивает. Что ж, я думаю, что файл angular.json не привязан к проекту, я попытался удалить styles.css из angular.json, и это не имеет значения. я могу воссоздать файл angular.json?

AmitBL 06.08.2018 01:26

Другие вопросы по теме