如何在Angular 6中注入/集成第三​​方库？

Question

Angular不支持某些库，例如Clappr，HashWords等。我想在Angular中使用它们，就像它们是Angular库一样。那么我们如何才能使Angular支持外部库/模块呢？

Answer 1

1）将软件包安装到您的项目中：npm i clappr 2）将类型声明导入Angular应用：app.component.ts

Answer 2

在index.html中添加库文件。可以通过在组件类外部进行此类声明declare var Clappr: any;来在库中使用库公开的变量。

Answer 3

这是我在Angular 9项目中的安装方式：

1. npm install clappr
2. 将clappr添加到angular.json中：

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "scripts": [
            "node_modules/clappr/dist/clappr.min.js"
          ],
          "styles": [
            "./src/styles.css"
          ]
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "scripts": [
            "node_modules/clappr/dist/clappr.min.js"
          ],
          "styles": [
            "./src/styles.css"
          ]
        }
      }

1. 创建文件index.d.ts并将clappr声明为：

declare module 'clappr';

1. 将其导入component.ts文件：

import * as Clappr from 'clappr';

Answer 4

对于Clappr- 在Angular CLI中，运行命令-

  

    

npm i clappr

  

https://www.npmjs.com/package/clappr

然后按照给定的步骤进行。.

Answer 5

如果该库具有ES6模块，则可以将其导入。

如果该库只是一个JS文件，则可以通过在angular.json中的scripts数组上添加js文件路径，从而像在index.html上使用<script>标签导入文件一样添加文件。 / p>

如果类型可用，则可以将它们添加到typescript.json的类型数组中

这是完成所有操作的指南。

https://nitayneeman.com/posts/how-to-add-third-party-library-in-angular-cli/

如果您不喜欢将第三方库用作全局变量，则可以将它们变成不可移植的。这是一个涉及更多的过程，但是非常整洁。

这也是该指南：

https://hackernoon.com/angular-providers-how-to-inject-3rd-party-library-af4a78722864