【问题标题】:Angular app doesn't include external librariesAngular 应用程序不包含外部库
【发布时间】:2018-08-05 22:03:50
【问题描述】:

所以我是 Angular 的新手,我已经在项目的 node_modules 中安装了带有 npm 的引导程序。 我不知道为什么,但每隔一段时间,当我处理我的项目时,应用程序就会“启动”这个关于不包括引导程序和其他外部库的事情。 我正在使用 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://AmitBL@bitbucket.org/AmitBL/event-planner.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/AmitBL/event-planner#readme"
}

如果有人知道是什么原因造成的,我将不胜感激。 谢谢。

【问题讨论】:

  • 是每次发生还是随机发生?您如何在项目中访问引导程序?仅仅安装引导包是不够的。您还需要参考引导 css 文件。
  • 是的,它是随机发生的,该项目大约在两个小时前还可以,并且知道它不是。我需要在哪里引用引导 css 文件?
  • 在“styles”数组中包含 angular.json 中的引导 css 或使用 @import '~bootstrap/dist/css/bootstrap.min.css'; 将其导入到 src/styles.css 中
  • 好吧,@import '~bootstrap/dist/css/bootstrap.min.css'; 有效,但我很好奇为什么 angular.json 不包括在内。 angular.json 中有两个“样式”数组。我试图将它添加到他们两个,但没有运气。
  • 在 angular.json 中你必须提供 node_modules 路径。试试node_modules/bootstrap/dist/css/bootstrap.min.css。它只需要包含在构建配置的“样式”数组中。

标签: angular package.json


【解决方案1】:

您必须在现有 styles 数组中的 angular.json 中声明引导样式

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

【讨论】:

  • 不起作用,太令人沮丧了。好吧,我认为 angular.json 文件没有绑定到项目,我尝试从 angular.json 中删除 styles.css 并没关系。我可以重新创建 angular.json 文件吗?
猜你喜欢
  • 2018-01-05
  • 2018-02-01
  • 1970-01-01
  • 2014-09-29
  • 2020-01-14
  • 1970-01-01
  • 1970-01-01
  • 2017-10-31
  • 1970-01-01
相关资源
最近更新 更多