将外部Javascript库全局包含到Angular项目中&；恰当地

在Angular中开发时，我们经常需要使用外部JS库，所以今天我想问一下在全球范围内实现这一点的最干净的方法

实际上，我正在尝试包括dateFormat JS库：

问题1： JS库是使用相同的体系结构创建的，或者在项目中包含它们的方法不止一种

问题2： 如何在我的项目中全局包含此特定库，我是否可以在我的app.module.ts中执行一些操作，使其在所有项目中都可用

我实际上做的是：

npm install dateformat

我试图简单地将其添加到一个组件中，但使用此方法失败：

import * as dateformat from "dateformat";

@Component({
  selector: 'page-notifications',
  templateUrl: 'notifications.html'
})

export class NotificationsPage {

    constructor(){
        console.log("test",dateFormat(new Date(), "dddd, mmmm dS, yyyy, h:MM:ss TT") );
    }

}

---

包含外部纯javascript库的最佳方法是使用

npm install…

安装它，然后分别在

scripts

和

styles

属性中的

angular.json

文件中添加所有.js和.css文件（来自node_modules文件夹）。 这些脚本和样式将与应用程序捆绑在一起，在每个组件中，您都可以访问它们定义的全局变量

例如，您可以npm安装jQuery，将其添加到

脚本

属性的angular.json文件中，如下所示：

"scripts": ["../node_modules/jquery/dist/jquery.min.js"]

import * as $ from 'jquery';

在顶部声明如下：

"scripts": ["../node_modules/jquery/dist/jquery.min.js"]

import * as $ from 'jquery';

然后你可以像平常一样使用它

---

这取决于每个库如何操作。您可以尝试查看是否有用于angular的包装器库。对于全局库，您可以将其添加到

index.html

或

angular.json

的脚本数组中

您也可以像以前一样使用

import

，如果库允许，这是最干净的方法。就我所见，

dateformat

库还可以，您只需要更正一个输入错误：（dateformat vs dateformat）

---

为了获得预期的结果，请使用下面的选项，将npm install@types/dateformat与dateformat一起使用

问题：类型声明可以在TypeScript 2.0中进行，无需任何工具，只需从npm进行。 @types scope包包含外部库（如lodash、jQuery、dateformat）的类型定义，节点的这些类型定义允许我们使用require，它是dateformat库的全局函数

有关更多详细信息，请参阅此链接

参考代码：

npm install @types/dateformat --save
npm install dateformat --save

组件。ts

从'@angular/core'导入{Component}；
从“@angular/common”导入{formatDate}；
从“dateformat”导入*作为dateformat

@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
现在=新日期（）；
结果：任意=“”；
测试：any=dateformat

构造函数（）{
log（“test”，formattate（现在是'dd-MM-yyy-hh:MM:ss-a'，'en-US'，'+0530'）；
this.result=this.test.default（新日期（），“dddd，mmmm-dS，yyyy，h:MM:ss-TT”）
log（“dateformat”，this.result）；
}
}

工作代码示例-

注意：包含内置的formatDate，在angular中可用于格式化日期，因此只需从@angular/common导入即可（在上面的示例中添加了示例工作代码）