如何在 Angular 6+ 中正确使用第三方 JavaScript 库

Question

我想在我的 Angular 项目中使用一些第三方库，但从 Angular 版本 6 开始，我收到引用错误：全局未定义。我已经安装了库并添加了@types库。不幸的是，我还没有让它工作。

有没有人可以向我解释如何在 angular 6 及更高版本中使用第 3 方库？我不想仅仅为了一个javascript库而恢复到Angular 5。

Answer 1

将其添加到索引中.html

<script>
if (global === undefined) {
var global = window;
}
</script>

来自： https://github.com/aws-amplify/amplify-js/issues/678

Answer 2

有几种方法可以使用它，具体取决于您的确切需求。

一般来说，对于那些遗留的非类型化 js 库，你总是可以使用如下的东西：

import * as jquery from 'jquery'

对于需要全局访问的库，您可能需要调整angular.json文件并添加对scripts字段的引用：

"scripts": [
"node_modules/zoomooz/jquery.zoomooz.min.js"
],

对于一些带有默认导出语句的棘手库，您甚至可能需要执行以下操作：

import LIBRARYNAME from 'library-name'(不带括号(

所以这真的取决于你需要什么。