javascript - Importovať knižnicu JS tretej strany do knižnice Angular 12

Staviam knižnicu Angular a už nejaký čas sa neúspešne snažím zahrnúť do nej externú JS knižnicu. Moje nastavenie vyzerá takto:

project/
├─ angular-lib/
├─ angular-lib-demo-app/

Snažím sa nainštalovať plain-draggable, aby som ho mohol používať v Angular. Nainštaloval som plain-draggable pomocou príkazu npm i plain-draggable a deklaroval som ho s declare let PlainDraggable: any; vo svojom súbore component.ts. Bohužiaľ, keď volám konštruktor, dostanem chybovú správu: ERROR ReferenceError: PlainDraggable is not defined

Moja metóda je nasledovná, aby som získal predstavu o tom, čo robím v prípade:

addNode() {
   /**
    * create node and set attributes
    */
   let node = document.createElementNS("http://www.w3.org/2000/svg", "g");
   let factory = this.componentFactoryResolver.resolveComponentFactory(NodeComponent);
   let componentRef = factory.create(this.injector, [], node);

   let dragNode = new PlainDraggable(node);

   /**
    * render node in angular view
    */
   this.appRef.attachView(componentRef.hostView);
   this.renderer.setAttribute(node, "ng-node", "");
   this.renderer.setAttribute(node, "id", "node-" + (this.nodes.length+1))
   this.renderer.appendChild(this.graph.nativeElement, node);

   /**
    * add node to graph data structure
    */
   this.nodes.push(node);}

Okrem riadku s PlainDraggable všetko ostatné funguje presne tak, ako má, a je bez chýb. Bohužiaľ som našiel len veľmi zastaralé tutoriály a informácie týkajúce sa importovania a zahrňovania JS knižníc v Angular. Ale bohužiaľ žiadne nedávne, ktoré by sa explicitne odvolávali na Angular 12.

Možno niekto tu môže dať nejaké tipy, aké kroky je potrebné nasledovať, aby nebola dostupná len API, ale aby bola knižnica aj náležite zabalená a mohol som ju zahrnúť do angular-lib-demo-app.

Upraviť: Skúšal som ho pridať do súboru angular.json takto:

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-lib": {
      "projectType": "library",
      "root": "projects/angular-lib",
      "sourceRoot": "projects/angular-lib/src",
      "prefix": "ng",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "scripts": [
              {
                "input": "projects/angular-lib/node_modules/plain-draggable/plain-draggable.min.js",
                "inject": true,
                "bundleName": "plain-draggable"
              }
            ],
            "tsConfig": "projects/angular-lib/tsconfig.lib.json",
            "project": "projects/angular-lib/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/angular-lib/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/angular-lib/src/test.ts",
            "tsConfig": "projects/angular-lib/tsconfig.spec.json",
            "karmaConfig": "projects/angular-lib/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/angular-lib/tsconfig.lib.json",
              "projects/angular-lib/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angular-lib-demo-app": {
      "projectType": "application",
      "schematics": {},
      "root": "projects/angular-lib-demo-app",
      "sourceRoot": "projects/angular-lib-demo-app/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-lib-demo-app",
            "index": "projects/angular-lib-demo-app/src/index.html",
            "main": "projects/angular-lib-demo-app/src/main.ts",
            "polyfills": "projects/angular-lib-demo-app/src/polyfills.ts",
            "tsConfig": "projects/angular-lib-demo-app/tsconfig.app.json",
            "aot": true,
            "assets": [
              "projects/angular-lib-demo-app/src/favicon.ico",
              "projects/angular-lib-demo-app/src/assets"
            ],
            "styles": [
              "projects/angular-lib-demo-app/src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/angular-lib-demo-app/src/environments/environment.ts",
                  "with": "projects/angular-lib-demo-app/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "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": "angular-lib-demo-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-lib-demo-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-lib-demo-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/angular-lib-demo-app/src/test.ts",
            "polyfills": "projects/angular-lib-demo-app/src/polyfills.ts",
            "tsConfig": "projects/angular-lib-demo-app/tsconfig.spec.json",
            "karmaConfig": "projects/angular-lib-demo-app/karma.conf.js",
            "assets": [
              "projects/angular-lib-demo-app/src/favicon.ico",
              "projects/angular-lib-demo-app/src/assets"
            ],
            "styles": [
              "projects/angular-lib-demo-app/src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/angular-lib-demo-app/tsconfig.app.json",
              "projects/angular-lib-demo-app/tsconfig.spec.json",
              "projects/angular-lib-demo-app/e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/angular-lib-demo-app/e2e/protractor.conf.js",
            "devServerTarget": "angular-lib-demo-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular-lib-demo-app:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "angular-lib"
}

Ale moje IDE mi stále hovorí, že "Property scripts nie je povolená." a pri spustení ng build ng-packagr hovorí "Overenie schémy zlyhalo s nasledovnými chybami: Cesta dát "" nesmie mať ďalšie vlastnosti (scripts)."

Urobil som veľa výskumu na tú časť s injekciou skriptov, ale bohužiaľ som nenašiel funkčné riešenie. Možno preto, že ide o typ knižničného projektu. Máte nejaké nápady, kam to umiestniť?

Odpoveď č. 1

Podarilo sa mi to rozbehnúť! Zjavne sa zdá, že do Angular knižnice nemôžete priraďovať závislosti cez angular.json pomocou poľa scripts. Musíte to urobiť v projekte, kde knižnicu používate.

Do časti mojej ukážkovej aplikácie som zahrnul nasledujúci kód a keď ju spustím, závislosť sa vyrieši a načíta.

Poznámka: projectType je "aplikácia".

"angular-lib-demo-app": {
  "projectType": "application",
  "schematics": {},
  "root": "projects/angular-lib-demo-app",
  "sourceRoot": "projects/angular-lib-demo-app/src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/angular-lib-demo-app",
        "index": "projects/angular-lib-demo-app/src/index.html",
        "main": "projects/angular-lib-demo-app/src/main.ts",
        "polyfills": "projects/angular-lib-demo-app/src/polyfills.ts",
        "tsConfig": "projects/angular-lib-demo-app/tsconfig.app.json",
        "aot": true,
        "assets": [
          "projects/angular-lib-demo-app/src/favicon.ico",
          "projects/angular-lib-demo-app/src/assets"
        ],
        "styles": [
          "projects/angular-lib-demo-app/src/styles.css"
        ],
        "scripts": [{
          "input": "projects/angular-lib/node_modules/plain-draggable/plain-draggable.min.js",
          "inject": true,
          "bundleName": "plain-draggable"
        }] ...