切换和模态不适用于Angular应用 [英] Toggle and Modals are not working on Angular app

问题描述

我是Angular的新手，但是在启动Bootstrap切换和Modal时遇到一些问题. BootStrap CSS文件之所以有效，是因为表单采用了样式.但是，我认为JS文件未正确链接.请让我知道我在做什么.

I am new to Angular and having some issues with getting Bootstrap toggle and Modal to work. BootStrap CSS files are working because the form is picking up the styling; however, I reckon JS files are not being linked properly. Please let me know what am I doing working.

我使用Angular CLI进行了BootStrap和jQuery的NPM安装. 安装后，我将BootStrap和jQuery文件链接到angular.json文件，以便应用程序能够使用这些库.

I did an NPM install of BootStrap and jQuery using the Angular CLI. Once installed, I linked the BootStrap and jQuery files to the angular.json file for the application to be able to use the libraries.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/LyndaChapter1",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            **"styles": [
              **"node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"**
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/jquery/dist/jquery.js"
            ],**
            "es5BrowserSupport": true
          },
          "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"
                }
              ]
            }
          }
        },

预期结果:切换和模态应该起作用 实际结果:都不起作用

Expected result: Toggle and Modals should work Actual result: Neither are working

推荐答案

在这里，我同意关于不使用jQuery的其他答案，如果您打算将其与引导程序或依赖的其他任何库一起使用上，您必须先先加载 jQuery.

While I agree with the other answers here about not using jQuery, if you are going to use it with bootstrap, or any other library that depends on it, you must load jQuery first.

因此，要解决您的问题，只需将jQuery依赖项放在bootstrap依赖项之上.

So, to fix your issue, simple put the jQuery dependency above the bootstrap dependency.

这篇关于切换和模态不适用于Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！