【发布时间】：2021-08-26 22:32:05
【问题描述】：
我正在构建一个 Angular 库，并且很长一段时间以来一直试图在其中包含一个 3rd 方 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 说 “架构验证失败并出现以下错误：数据路径"" 不得有其他属性（脚本）。"
我对脚本注入部分进行了大量研究，但遗憾的是无法找到可行的解决方案。也许是因为它是一个库项目类型。有什么想法，放在哪里？
【问题讨论】：
-
有没有尝试在angular.json文件的Scripts属性中添加JS文件？将具有正确路径的 plain-draggable.min.js 添加到 angular.json 文件中的脚本属性中，一切都应该像魅力一样工作。
-
好提示，我已经为此做了很多。我编辑了关于这个的问题。我没有找到将其放入 angular.json 的正确配置。任何想法，如何正确地做到这一点？
-
你能分享你的 angular.json 吗？马上编辑对我很有帮助！
-
哇！谢谢，这么快的反应。我再次编辑了我的初始帖子并提供了我的整个 angular.json 文件。
标签： javascript angular typescript angular12