在角项目上安装bootstrap-Java 学习之路

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

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

“styles”：[“styles.css”，“../ node_modules / bootstrap / did / css / bootstrap.css”]，“scripts”：[“../ node_modules / jquery / dream / 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：\ Angular \ node_modules \ jquery \ dist \ jquery.min.js'

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"]
          },

回复于 2024-04-29T15:37:47+08:00

在角项目上安装bootstrap

1 回答

相关问题