0

如何配置我angular.json在运行时延迟加载 SDK+jQuery？

我目前有以下“正常”加载：

// package.json
"dependencies": {
    "@angular/common": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/forms": "^8.2.1",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/pwa": "~0.802.1",
    "@angular/router": "^8.2.1",
    "@angular/service-worker": "^8.2.1",
    "@capacitor/android": "^1.5.0",
    "@capacitor/cli": "^1.5.0",
    "@capacitor/core": "^1.5.0",
    "@capacitor/ios": "^1.5.0",
    "@ionic-native/core": "^5.24.0",
    "@ionic-native/native-audio": "^5.24.0",
    "@ionic/angular": "5.0.0",
    "@ionic/storage": "^2.2.0",
    "@zoomus/websdk": "^1.7.8",
    "angular-pipes": "^9.0.2",
    "angularfire2": "^5.4.2",
    "core-js": "^2.5.7",
    "dayjs": "1.8.0",
    "firebase": "^7.14.1",
    "firebase-functions": "^3.6.1",
    "google-libphonenumber": "^3.2.1",
    "howler": "^2.1.3",
    "jquery": "^3.5.1",
    "minimist": "^1.2.5",
    "npm": "^6.14.4",
    "rxjs": "6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.803.27",
    "@angular-devkit/build-angular": "^0.803.27",
    "@angular-devkit/core": "^8.2.1",
    "@angular-devkit/schematics": "^8.2.1",
    "@angular/cli": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/compiler-cli": "^8.2.1",
    "@angular/language-service": "~8.2.1",
    "@commitlint/cli": "^8.1.0",
    "@commitlint/config-angular": "^8.1.0",
    "@ionic/angular-toolkit": "^2.0.0",
    "@types/node": "12.0.0",
    "@webcomponents/webcomponentsjs": "^2.2.10",
    "codelyzer": "^5.0.1",
    "husky": "^1.3.1",
    "ts-node": "~8.1.0",
    "tslint": "~5.16.0",
    "typescript": "~3.5.3"
  }

// angular.json

            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/@zoomus/websdk/dist/lib/",
                "output": "./node_modules/@zoomus/websdk/dist/lib/"
              },
            ],
            "styles": [
              "node_modules/@zoomus/websdk/dist/css/bootstrap.css",
              "node_modules/@zoomus/websdk/dist/css/react-select.css",
            ],

但是由于一个奇怪的依赖问题，我必须jquery在我的index.html

core.js:6014 ERROR Error: Uncaught (in promise): ReferenceError: $ is not defined
ReferenceError: $ is not defined
    at Object.<anonymous> (zoomus-websdk.umd.min.js:2)

// index.html
<head>
  <script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>
</head>

我想做的是在我的构建中包含所有资产，但只有在用户尝试加入缩放会议时才加载和依赖项jquery。zoomus-websdk.umd.min.js

我尝试了以下变体，但即使构建了捆绑包，sdk 仍然包含在原始页面加载中。

// angular.json
            "scripts":[
              {
                "input": "./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js",
                "lazy": true,
                "bundleName": "lazy-zoom-sdk"
              }
            ],
            "styles": [
              {
                "input": "node_modules/@zoomus/websdk/dist/css/bootstrap.css",
                "lazy": true,
                "bundleName": "lazy-zoom-css"
              },
              {
                "input": "node_modules/@zoomus/websdk/dist/css/react-select.css",
                "lazy": true,
                "bundleName": "lazy-zoom-css"
              }
            ]

我什至不确定在哪里/何时明确zoomus-websdk.umd.min.js添加到项目中，但我认为它来自package.json

4

0 回答 0