在 angular 项目上安装 bootstrap

Question

您好，我的机器中有最新的 angular cli。我尝试在 angular 项目上安装 bootstrap。这些是我遵循的步骤。

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

"styles":[ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts"：[ "../node_modules/jquery/dist/jquery.min.js", “../node_modules/bootstrap/dist/js/bootstrap.js” ]

之后我运行服务项目我收到这条错误消息。

Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ ** 91% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'D:\Angular\node_modules\jquery\dist\jquery.min.js'

Answer 1

从 angular 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 anymore, you can use 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"]
          },

Answer 2

将命令行放在项目中，然后运行:

npm install bootstrap@next

然后，转到 ide 转到 Angular.json 并在样式中键入：

"styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ]

对脚本执行相同的操作：

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

在 angular 项目上安装 bootstrap

install bootstrap on angular project

javascript

installation

angular

angular6