Question

嗨，我的机器里有最新的角度cli。我试图在角项目上安装bootstrap。这些是我遵循的步骤。

ng new Demo
npm install bootstrap jquery --save
然后在我复制的angular.json文件中打开vs code中的项目下面的代码。

“风格”：[ “styles.css”，“.. / node_modules / bootstrap / did / css / bootstrap.css” ] “剧本”：[ “../node_modules/jquery/dist/jquery.min.js” “../node_modules/bootstrap/dist/js/bootstrap.js” ]

之后我运行项目ng服务我收到了这个错误信息。

Angular Live Development Server正在侦听localhost：4200，已打开您的浏览器位于http://localhost:4200/ ** 91％的额外资产处理脚本-webpack-plugin×「wdm」：错误：ENOENT：没有这样的文件或目录，打开 'd：\角\ node_modules \ jquery的\ DIST \ jquery.min.js'

Answer 1

角度为6之后的CLI项目将使用angular.json而不是.angular-cli.json进行构建和项目配置。

每个CLI工作区都有项目，每个项目都有目标，每个目标都可以有配置。 Docs

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

在angular.json中，将build目标下的样式和脚本数组的文件路径添加到./而不是../

Boostrap 4 does not support Glyphicons，您可以使用Font Awesome代替：
执行npm install --save font-awesome并添加样式数组的文件路径

 "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"
               "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": ["./node_modules/jquery/dist/jquery.min.js",
                       "./node_modules/bootstrap/dist/js/bootstrap.min.js"]
          },

在角度项目上安装bootstrap

1 个答案: