How do you lazy load a package with `@angular-devkit/build-angular`

Question

How do I configure my angular.json to lazyload an SDK+jQuery on runtime?

I currently have the following to load "normally":

// 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",
            ],

But because of a strange dependency problem, I have to load jquery manually in my index.html

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

// index.html

What I would like to do is to include all the assets in my build, but only load jquery, zoomus-websdk.umd.min.js and dependencies when the user tries to join a zoom meeting.

I tried variations of the following, but even though the bundles get built, the sdk keeps getting included with the original page load.

// 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"
              }
            ]

I'm not even certain where/when zoomus-websdk.umd.min.js is explictly added to the project, but I assume it's from package.json

How do you lazy load a package with `@angular-devkit/build-angular`

Answers (0)

Related Questions