angular - 如何在angular 6库中添加外部js文件

Question

我正在创建一个 Angular 库(版本 6)，它基于我需要包含 hammer js 库的 Angular Material 。

我知道在angular 6中我们可以在项目配置下的angular.json中添加外部js库。但这在上述库的情况下不起作用。我尝试通过以下方式添加外部库。

"my-library": {
  "root": "projects/my-library",
  "sourceRoot": "projects/my-library/src",
  "projectType": "library",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-library/tsconfig.lib.json",
        "project": "projects/my-library/ng-package.json",
        "scripts": [
          "../node_modules/hammerjs/hammer.min.js"
        ]
      }
    }
}

但是我收到了这个错误。

Schema validation failed with the following errors: Data path "" should NOT have additional properties(scripts).

请建议在 Angular 库中添加外部 js 文件的正确方法是什么。

Answer 1

所以这是我们需要解决的两个可能的问题

1)如何在主angular项目(demo项目)中添加外部JS的引用

2) 如何在npm包中添加外部js的引用。

第一种情况的解决方案是:

在您的 angular.json 中提供外部 JS 的引用脚本标签中的主要 Angular 项目文件，并像这样从您的库 node_modules 文件夹中提供您的包的路径。

"scripts": [ "./projects/my-cool-library/node_modules/my-exteranl-library/dist/x.js"]

第二种情况的解决方案是:

方法一

现在你已经从你的库中创建了 NPM 包，你将在不同的项目中使用它。显然，一旦你下载了你的包，你的第 3 方包依赖项就会自动下载，你只需要在 angular.json 的脚本标签中提供该 JS 的引用。新项目的文件。

"scripts": [ "./node_modules/my-exteranl-library/dist/x.js"]

方法二

在创建 NPM 包时不要指定第三方依赖项从 package.json 中删除条目你的酷库文件

"dependencies": {
"my-exteranl-library": "^1.1.0" <-- Remove this
}
并使用脚本标签通过 CDN 在 index.html 文件中直接将 js 添加到新创建的应用程序中

<script src="https://demo-cdn.com/ajax/libs/my-exteranl-library/dist/x.js"></script>

还有第三种方式，您可以通过在您的库中编写代码来下载 JS，稍后将在此处分享。