将第 3 方 JS 库导入 Angular12 库

Question

我正在构建一个 Angular 库，并且在很长一段时间内一直试图在其中包含第 3 方 JS 库，但没有成功。我的设置如下所示：

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

我尝试安装 plain-draggable，以便能够在 Angular 中使用它。我已经通过 npm i plain-draggable 命令安装了 plain-draggable 并在我的 component.ts 文件中用 declare let PlainDraggable: any; 声明了它。不幸的是，当我调用构造函数时，我收到错误消息：ERROR ReferenceError: PlainDraggable is not defined

我的方法如下，大概了解下我是怎么做的：

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);}

除了带PlainDraggable的那一行，其余的都正常运行，没有错误。不幸的是，我只在 Angular 中找到了关于导入和包含 JS 库的非常过时的教程和信息。但不幸的是，最近没有明确提到 Angular 12.

也许这里有人可以给出一些关于需要遵循哪些步骤的提示，这样不仅 API 可用，而且库也相应地打包，我可以将它包含在 angular-lib-demo-app.

编辑： 我确实尝试将它添加到 angular.json 文件中，例如：

{"$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"
}

但是我的 IDE 一直告诉我，"属性脚本是不允许的。" 和运行 ng build ng-packagr 说 “架构验证失败，出现以下错误：数据路径“”不能有其他属性（脚本）。“

我对该脚本注入部分进行了大量研究，但遗憾的是无法为此找到可行的解决方案。也许是因为它是图书馆项目类型。有什么想法，放在哪里？

Answer 1

我做到了！显然，您似乎无法使用脚本字段通过 angular.json 将依赖项分配给 Angular 库。您必须在使用该库的项目中执行此操作。

我在我的演示应用程序部分包含了以下代码，当我启动它时，依赖项已解析并加载。

注：projectType为“应用”。

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

将第 3 方 JS 库导入 Angular12 库

Import 3rd party JS lib into Angular 12 Library

javascript

angular

typescript

angular12