Не вижу импорт начальной загрузки

#javascript #angular #typescript #twitter-bootstrap-3

#javascript #угловой #typescript #twitter-bootstrap-3

Вопрос:

я пытаюсь разработать проект angular, и для проекта внутри файла angular.json я определил 2 стиля. styles.css и node_modules/bootstrap/dist/css/bootstrap.min.css. Когда я набираю run ng serve, он сообщает, что он успешно скомпилирован. Но когда я захожу в инструменты разработчика, внутри раздела head нет стиля, и он выдает это предупреждение:

 `DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

1. Пожалуйста, опубликуйте фрагмент angular.json, где вы упомянули относительный путь для bootstrap.min.css.

2. Пожалуйста, предоставьте свой пример кода, т.Е. Как вы настроили angular JSON

Ответ №1:

Вот как вы можете настроить bootstrap для вашего проекта Angular (7 ).

Сначала вам необходимо установить последнюю версию bootstrap, используя приведенную ниже команду.

 npm install bootstrap --save

После установки bootstrap в node_modules будет создана папка начальной загрузки. Вам необходимо настроить bootstrap css в файле angular.json.

  "projects": {
    "ng-base": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng-base",
            "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.min.css",
              "src/styles.scss"
            ],
            "scripts": []
          },

Другой способ импортировать начальную загрузку — из вашего файла style.scss.

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

Как только вы закончите с этим, просто перезапустите приложение, используя команду ng serve . Вы должны увидеть style.css и bootstrap.css в инструментах разработки.

1. Спасибо, я использовал этот метод, он сказал, что скомпилирован успешно, но выдает это предупреждение об устаревании, когда я запускаю команду ng serve (узел: 11568) [DEP0148] Предупреждение об устаревании: использование устаревшего сопоставления папок «./» в поле «экспорт» разрешение модуля пакета в C:UsersuserDesktopAngularnew-appnew-appnode_modulestslibpackage.json . Обновите этот package.json, чтобы использовать шаблон вложенного пути, например «./*». (Используйте node —trace-устаревание … чтобы показать, где было создано предупреждение

2. Какую версию Node js вы используете. Пожалуйста, проверьте в командной строке Node JS с помощью команды node -v. Также, пожалуйста, проверьте свою версию angular cli и версию angular.

3. Я использую версию node JS версии 15.2.0 и версию angular cli версии 11.0.1