我在 Angular 8 中安装了引导程序但无法正常工作。为啥？

Posted 2023-05-08

技术标签:

【中文标题】我在 Angular 8 中安装了引导程序但无法正常工作。为啥？【英文标题】：I installed bootstrap in angular 8 but not working.Why?我在 Angular 8 中安装了引导程序但无法正常工作。为什么？ 【发布时间】：2019-12-03 16:37:54 【问题描述】：

我在我的项目中安装了 bootstrap 3.4.1 和 jquery。没有错误。package.json 中显示了版本我还在 angular.json 文件中添加了 bootstrap 文件路径。但是 bootstrap 主题根本不起作用。

我按照这个视频安装 bootsrap： https://www.youtube.com/watch?v=KaTtlGSJ0QE

安装顺利，但使用http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css 进行验证在控制台中出现了一些错误。

angular.json:

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery/dist/jquery.min.js"
            ]

html:

<div class="container-fluid ">
      <h1>Login</h1>
      <form  [formGroup]="loginForm" (ngSubmit)="onSubmit()">

          <div class="form-group">
            <label for="userName">User Name : </label>
            <input formControlName="userName" type="text" class="form-control" >
          </div>
          <div class="form-group">
              <label for="password">Password : </label>
              <input  formControlName="password" type="password" class="form-control" >
          </div>

            <button class="btn btn-primary" type="submit"  >Login</button>

        </form>
        loginForm.value | json
    </div>

o/p 不包含任何预期的引导程序样式。

【问题讨论】：

在npm install bootstrap --save 之后只需将引导 css 导入到您的主 style.css 或 style.scss 例如在style.scss 添加以下 @import 'bootstrap/dist/css/bootstrap.min.css'; 也最好不要使用带有 angular go 的 jquery像ngx-bootstrap 这样的替代品在引导安装和配置之后，您只需要使用“ng serve”命令再次运行 Angular App。 【参考方案1】：

像这样更改 angular.json：

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.scss"
],
"scripts": [
   "node_modules/jquery/dist/jquery.min.js", // <- jQuery goes first
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

您还可以将您的代码与作者版本here 进行比较。该教程的文本版本。

【讨论】：

我更改了顺序并在 node_modules 之前删除了“/”，但仍然无法正常工作。在使用 url 进行验证时，它在控制台中显示错误：无法匹配任何根。 @AmalRaj 尝试重新启动 ng 服务，同时使用非常简单的标记验证引导程序，如下所示：<button type="button" class="btn btn-primary">Primary</button> 我重新启动了，即使使用单个按钮仍然无法正常工作。我尝试在 styles.css 及其工作中添加 ':@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ' @AmalRaj 你能从github 克隆这个repo 并试一试。它应该显示一个带有默认引导样式的按钮。【参考方案2】：

所有在 angular.json 文件的 test 部分中涉及到相对路径的解决方案都会失败。

我使用的解决方案是：

我在构建块下的项目块中添加了相对路径。我的 Angular 版本是：

         _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.20
Node: 12.13.1
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.20
@angular-devkit/core         8.3.20
@angular-devkit/schematics   8.3.20
@schematics/angular          8.3.20
@schematics/update           0.803.20
rxjs                         6.4.0

我的 angular.json 文件是：


  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "first-application": 
      "projectType": "application",
      "schematics": ,
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/first-application",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          ,
          "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,
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                
              ]
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "first-application:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "first-application:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "first-application:build"
          
        ,
        "test": 
          "builder": "@angular-devkit/build-angular:karma",
          "options": 
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [

            ]
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        ,
        "e2e": 
          "builder": "@angular-devkit/build-angular:protractor",
          "options": 
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "first-application:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "first-application:serve:production"
            
          
        
      
    
  ,
  "defaultProject": "first-application"

我之前的错误是在测试块中添加 css 和脚本，请重新检查整个 angular.json 文件并确保您在正确的块中并使用节点模块的相对路径，如上所示。

如果您将 Angular cli 更新到最新版本会更好。

【讨论】：

【参考方案3】：

如果您在实时服务器运行时安装引导程序，引导程序更改将不适用。停止实时服务器并重新启动

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案4】：

当你从 node_modules 导入时不要使用“/”，你应该在所有其他样式之后导入你的样式以增加它的优先级。

应该是：

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
              "src/styles.scss",
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js"
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
            ]

【讨论】：

我更改了顺序并在 node_modules 之前删除了“/”，但仍然无法正常工作。使用“localhost:4200/node_modules/bootstrap/dist/css/…”验证代码时，控制台中显示错误：无法匹配任何根。正常。你不能那样达到它。当您更改 angular.json 文件上的某些内容时，预览不会自动刷新。您是否重新启动了“ng服务”？如果无论如何它都不起作用，请您提供您的 package.json 文件。你能提供你的 package.json 吗？引导程序是否导入？您使用的是哪个版本？我尝试在 styles.css 及其工作中添加 ':@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ' 依赖项：“bootstrap”：“^3.4.1”，“jquery”：“^3.4.1”，在 package.json 中显示【参考方案5】：

Angular-9，通过删除 '/' 和路径的开头对我有用

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

【讨论】：

以上是关于我在 Angular 8 中安装了引导程序但无法正常工作。为啥？的主要内容，如果未能解决你的问题，请参考以下文章

我在虚拟驱动器中安装了 XAMPP，现在我无法运行它的服务。为啥？

无法在反应 js 中显示引导面板

Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

尽管我的系统中安装了相同的版本，但出现“org.scala-sbt#sbt;0.13.8: not found”错误。如何解决这个问题？

ActiveX 组件无法创建对象。 Excel VBA中的搭扣

在 mac os 中安装 Grunt