Angular.json 脚本未加载

2023-12-31

我正在尝试使用bootstrap导航栏的示例来自bootstrap文档, 如果我从以下位置加载它angular.json切换汉堡不起作用。 如果我使用的是来自的 CDN 链接bootstrap docs:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

它正在工作。

这是我正在使用的代码(来自 Bootstrap 网站)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

这是angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ClientApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ClientApp",
            "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.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.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
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ClientApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ClientApp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ClientApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ClientApp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ClientApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ClientApp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ClientApp"
}

我有同样的问题here https://stackoverflow.com/questions/46916060/scripts-dont-load-from-angular-cli-json.

CSS 文件已加载,我可以看到navbar但响应式切换(汉堡包)不起作用


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular.json 脚本未加载 的相关文章

随机推荐

  • 如何将分段计时器添加到 Google 表单中进行学校测验? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们使用 Google Forms 进行了英语语言测试 该测试分为 3 个部分 我们希望能够为每个部分设置时间 例如 A 部分 10
  • 在设备和应用商店上刷新 SQLITE3(核心数据)

    我有一个利用 Core Data SQLITE3 的应用程序 可以在模拟器中完美运行 但是我不明白如何更新设备上的数据库 我猜这与应用程序商店中的相同 我从应用程序中的 txt 文件更新数据库并创建数据库 此功能仅用于创建数据库 将在最终版
  • 为什么在 Default.png 期间状态栏仍然显示?

    我非常确定我已采取所有步骤将状态栏正确设置为隐藏 我在 info plist 文件 将 UIStatusBarHidden 设置为布尔值 TRUE 以及应用程序委托中的 applicationDidFinishLaunching 方法中执行
  • C++ vs2010 增加堆栈大小

    我正在使用 vs2010 c 来处理图像 我的图像是 1920 x 1200 的数组 我什至无法声明 unsigned short frame 1920 1200 由于堆栈溢出 如何增加堆栈大小 在 Visual Studio 中 您可以通
  • 为什么第一个 AJAX 调用会重置我的视图参数?

    我无法找出为什么第一个 ajax 调用会导致再次调用我的视图参数的 setter 而每个后续调用都不会再次调用该 setter 我有以下简单的视图 bean package test import java io Serializable
  • Numba - nopython 模式是否支持元组列表?

    我想澄清一下 这是我第一次使用 Numba 所以我距离成为专家还很远 我正在尝试手动实现一个简单的 KNN 代码如下 jit nopython True def knn training set test set for q in rang
  • 带有载波上传字段的工厂[重复]

    这个问题在这里已经有答案了 您好 例如 我需要为我的模型建立工厂 Factory define farm do f f name Factory next name f harvest 3 f offers Random f latitud
  • 在.Net 2中使用WCF时int属性为0

    我在 Net 4 中有一个 MVC 项目 其中包含带有 BasicHttpBinding 的 WCF 服务 当在 Net 2 中使用此服务时 如果属性为 int 则到达的值为 0 如果它是一个字符串 那么就可以了 在 Net 4 中构建一个
  • 序列化包含java对象的对象

    我尝试序列化一个包含另一个本身可序列化的对象的对象 有办法让它发挥作用吗 当我序列化第一个对象时 指向另一个对象的指针似乎丢失了 以下是关于持久对象的两条规则 规则 1 要持久化的对象必须实现 Serialized 接口或从其对象层次结构继
  • glGenTextures 在后台线程中返回零

    我需要在 OpenGL ES 的后台线程中加载纹理 但在后台线程中调用时 glGenTextures 始终返回零 void someMethodInMainThread self performSelectorInBackground se
  • 如何读取 Servlet 中的图像(或其他文件)并将其编码为 base64 [重复]

    这个问题在这里已经有答案了 在 servlet 中 我必须从磁盘读取图像文件 将其编码为 Base64 然后发送回客户端 因为我只找到了 iOS Python 和其他一些类型的示例 基本上都以相同的方式进行 所以我想在这里发布我的代码是为了
  • 共享除前缀之外的所有地点或如何使用 PlaceHistoryMapperWithFactory

    在我的 gwt app 中 我有一些地方共享除前缀之外的所有内容 例如 editUserPlace 和 showUserPlace 在这种情况下 状态由 userId 确定 我当前的尝试是通过 ShowUserPlace 和 EditUse
  • GCP 托管实例组不会扩展到零

    我有一个 GCP 托管实例组 我想使用 cron 计划将其扩展至 0 到 1 个实例 GCP 有一个局限性 https cloud google com compute docs autoscaler scaling schedules l
  • 单击正文,但其他一些标签不起作用

    有谁知道 css 位置 相对 可能会搞乱功能 body not theDIV click function alert 或者问题出在其他地方 发生的情况是 我有一个在单击按钮时出现的图标 并且当我单击主体上除 div 本身之外的任何位置时
  • 为什么我的 Gunicorn Python/Flask 工作人员会退出信号术语?

    我有一个 Python Flask Web 应用程序 我正在通过 Gunicorn 将其部署在 Amazon ECS 上的 Docker 映像中 一切都很顺利 然后突然间 包括最后一次成功的请求 我在日志中看到了这一点 2017 03 29
  • 如何将 ctx(上下文)传递给 CliRunner?

    CliRunner未列出任何参数来在其中提供上下文文档 http click pocoo org 5 api click testing CliRunner invoke 以下内容应作为最低限度的工作示例 真正的问题有点不同 可以通过将单击
  • 使用 EditText 显示密码

    我使用 EditText 输入密码 以及一个用于显示密码或不显示密码的复选框 下面是函数的一部分 public void ShowPassword if cb isChecked password setInputType InputTyp
  • tabBar didSelectItem 似乎不起作用

    在我的头文件中我有这个 interface TabBarController UIViewController
  • PHP 将 XML 转换为 JSON

    我正在尝试在 php 中将 xml 转换为 json 如果我使用简单的 xml 和 json encode 进行简单转换 则 xml 中不会显示任何属性 xml simplexml load file states xml echo jso
  • Angular.json 脚本未加载

    我正在尝试使用bootstrap导航栏的示例来自bootstrap文档 如果我从以下位置加载它angular json切换汉堡不起作用 如果我使用的是来自的 CDN 链接bootstrap docs