如何在 Angular 2 typescript 应用程序中使用 moment.js 库？

Question

我尝试将它与打字稿绑定一起使用：

npm install moment --save
typings install moment --ambient -- save

test.ts:

import {moment} from 'moment/moment';

没有：

npm install moment --save

test.ts:

var moment = require('moment/moment');

但是当我调用 moment.format() 时，我得到一个错误。 应该很简单，任何人都可以提供一个可行的命令行/导入组合吗？

Answer 1

2017 年 4 月更新：

从 2.13.0 版开始，Moment 包含一个打字稿定义文件。 https://momentjs.com/docs/#/use-it/typescript/

只需在控制台类型中使用 npm 安装它

npm install --save moment

然后在您的 Angular 应用程序中，导入就像这样简单：

import * as moment from 'moment';

就是这样，您将获得完整的 Typescript 支持！

额外编辑：要在 Typescript 中将变量或属性键入为 Moment，您可以这样做，例如：

let myMoment: moment.Moment = moment("someDate");

Answer 2

moment 是第三方全球资源。 moment 对象位于浏览器中的 window 上。因此，在您的 angular2 应用程序中 import 它是不正确的。而是在您的 html 中包含 <script> 标记，该标记将加载 moment.js 文件。

为了让 TypeScript 满意，您可以添加

declare var moment: any;

在您使用它来停止编译错误的文件顶部，或者您可以使用

///<reference path="./path/to/moment.d.ts" />

或使用 tsd 安装 TypeScript 可能自行找到的 moment.d.ts 文件。

示例

import {Component} from 'angular2/core';
declare var moment: any;

@Component({
    selector: 'example',
    template: '<h1>Today is {{today}}</h1>'
})
export class ExampleComponent{
    today: string = moment().format('D MMM YYYY');
}

请务必在您的 html 中添加 script 标签，否则moment 将不存在。

<script src="node_modules/moment/moment.js" />

模块加载moment

首先你需要设置一个模块加载器比如System.js来加载commonjs文件

System.config({
    ...
    packages: {
        moment: {
            map: 'node_modules/moment/moment.js',
            type: 'cjs',
            defaultExtension: 'js'
        }
    }
});

然后将时刻导入到需要使用的文件中

import * as moment from 'moment';

或

import moment = require('moment');

编辑：

还有一些捆绑器的选项，例如 Webpack 或 SystemJS builder 或 Browserify，它们将保持窗口对象的时间。有关这些的更多信息，请访问它们各自的网站以获取说明。

Answer 3

以下内容对我有用。

首先，暂时安装类型定义。

typings install moment --save

（注意：不是--ambient）

然后，解决缺少正确导出的问题：

import * as moment from 'moment';

Answer 4

我会选择以下内容：

npm install moment --save

到您的systemjs.config.js 文件的map 数组添加：

'moment': 'node_modules/moment'

到packages数组添加：

'moment': { defaultExtension: 'js' }

在您的 component.ts 中使用： import * as moment from 'moment/moment';

就是这样。您可以从组件的类中使用：

today: string = moment().format('D MMM YYYY');

Answer 5

我们现在正在使用模块，

试试import {MomentModule} from 'angular2-moment/moment.module';

npm install angular2-moment之后

http://ngmodules.org/modules/angular2-moment

Answer 6

要在Typescript 项目中使用它，您需要安装moment：

npm install moment --save

安装moment后，导入后可以在任意.ts文件中使用：

import * as moment from "moment";

Answer 7

对于 Angular 7+（也支持 8、9、10、11）：

1：通过命令npm install moment --save安装时刻

2：不要在app.module.ts中添加任何内容

3：只需在 component 或任何其他文件顶部添加导入语句：import * as moment from 'moment';

4：现在您可以在代码中的任何位置使用moment。就像：

myDate = moment(someDate).format('MM/DD/YYYY HH:mm');

Answer 8

--- 2017 年 11 月 1 日更新

Typings 现已弃用，并由 npm @types 取代。从现在开始，除了 npm 之外，获取类型声明将不需要任何工具。要使用 Moment，您无需通过 @types 安装类型定义，因为 Moment 已经提供了自己的类型定义。

所以，它减少到只有 3 个步骤：

1 - 包含类型定义的安装时刻：

npm install moment --save

2 - 在您的 HTML 文件中添加脚本标签：

<script src="node_modules/moment/moment.js" />

3 - 现在你可以使用它了。期间。

today: string = moment().format('D MMM YYYY');

---原始答案

只需 3 个步骤即可完成：

1 - 安装时刻定义 - *.d.ts 文件：

typings install --save --global dt~moment dt~moment-node

2 - 在您的 HTML 文件中添加脚本标签：

<script src="node_modules/moment/moment.js" />

3 - 现在你可以使用它了。期间。

today: string = moment().format('D MMM YYYY');

Answer 9

使用 ng CLI

> npm install moment --save

在 app.module 中

import * as moment from 'moment';

providers: [{ provide: 'moment', useValue: moment }]

在组件中

constructor(@Inject('moment') private moment)

这样你一次导入时刻

更新 Angular => 5

{
   provide: 'moment', useFactory: (): any => moment
}

对我来说，与 aot 一起工作 还有通用的

我不喜欢使用任何东西，但使用 moment.Moment 我得到了

Error   Typescript  Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'.

Answer 10

angular2-moment 库有像 {{myDate | amTimeAgo}} 在 .html 文件中使用。

同样的管道也可以作为组件类 (.ts) 文件中的 Typescript 函数进行访问。首先按照说明安装库：

npm install --save angular2-moment

在 node_modules/angular2-moment 中现在将是“.pipe.d.ts”文件，例如 calendar.pipe.d.ts、date-format.pipe.d.ts 等等。

其中每一个都包含等效管道的 Typescript 函数名称，例如，DateFormatPipe() 是 amDateFormatPipe 的函数。

要在您的项目中使用 DateFormatPipe，请将其导入并添加到 app.module.ts 中的全局提供程序：

import { DateFormatPipe } from "angular2-moment";
.....
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ...., DateFormatPipe]

然后在你想使用该函数的任何组件中，将其导入顶部，注入构造函数并使用：

import { DateFormatPipe } from "angular2-moment";
....
constructor(.......,  public dfp: DateFormatPipe) {
    let raw = new Date(2015, 1, 12);
    this.formattedDate = dfp.transform(raw, 'D MMM YYYY');
}

要使用任何功能，请遵循此过程。如果有一种方法可以访问所有功能，那就太好了，但上述解决方案都不适合我。

Answer 11

如果您可以添加更多第三方软件包，我使用了angular2-moment 库。安装非常简单，您应该按照自述文件中的最新说明进行操作。因此，我还安装了typings。

对我来说就像一个魅力，几乎没有添加任何代码来让它工作。

Answer 12

不确定这是否仍然是人们的问题，但是...使用 SystemJS 和 MomentJS 作为库，这为我解决了它

/*
 * Import Custom Components
 */
import * as moment from 'moment/moment'; // please use path to moment.js file, extension is set in system.config

// under systemjs, moment is actually exported as the default export, so we account for that
const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;

从那里对我来说效果很好。

Answer 13

对于 angular2 RC5，这对我有用...

通过 npm 首次安装时刻

npm install moment --save

然后在要使用的组件中导入moment

import * as moment from 'moment';

最后在systemjs.config.js“map”和“packages”中配置moment

// map tells the System loader where to look for things
  var map = {
  ....
  'moment':                     'node_modules/moment'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    ...
    'moment':                       { main:'moment', defaultExtension: 'js'}
  };

Answer 14

除了 SnareChop 的回答之外，我还必须更改 momentjs 的类型文件。

在moment-node.d.ts我换成了：

export = moment;

与

export default moment;

Answer 15

Moment.js 现在在 v2.14.1 中支持 TypeScript。

见：https://github.com/moment/moment/pull/3280

Answer 16

我自己在 Angular 中使用 Moment 的版本

npm i moment --save

import * as _moment from 'moment';

...

moment: _moment.Moment = _moment();

constructor() { }

ngOnInit() {

    const unix = this.moment.format('X');
    console.log(unix);    

}

首先将时刻导入为_moment，然后声明moment 类型为_moment.Moment 的变量，初始值为_moment()。

moment 的普通导入不会给你任何自动完成，但如果你将声明类型为 Moment 接口的时刻来自 _moment 命名空间来自 'moment' 包初始化并调用时刻命名空间 _moment() 给你自动完成时刻的 api .

如果您正在寻找像 moment 这样的 vanilla javascript 库的自动完成功能，我认为这是不使用 @types typings 或角度提供程序的最有角度的使用方式。

Answer 17

尝试将"allowSyntheticDefaultImports": true 添加到您的tsconfig.json。

标志有什么作用？

这基本上告诉 TypeScript 编译器可以使用 ES6 导入语句，即。 e.

import * as moment from 'moment/moment';

在像 Moment.js 这样没有声明默认导出的 CommonJS 模块上。该标志只影响类型检查，不影响生成的代码。

如果你使用 SystemJS 作为你的模块加载器，这是必要的。如果您告诉 TS 编译器您使用 SystemJS，该标志将自动打开：

"module": "system"

如果 IDE 被配置为使用 tsconfig.json，这也将消除 IDE 引发的任何错误。

Answer 18

以下内容对我有用：

typings install dt~moment-node --save --global

类型存储库中不存在矩节点。您需要重定向到“绝对类型”才能使用前缀 dt 使其工作。

Answer 19

对于带有 systemjs 和 jspm 的 angular2 必须这样做：

import * as moment_ from 'moment';
export const moment =  moment_["default"];

var a = moment.now();
var b = moment().format('dddd');
var c = moment().startOf('day').fromNow();

Answer 20

对于 ANGULAR CLI 用户

使用外部库在此处的文档中：

https://github.com/angular/angular-cli/wiki/stories-third-party-lib

只需通过

安装您的库

npm install lib-name --save

并将其导入您的代码中。如果库不包含类型， 您可以使用以下方式安装它们：

npm install lib-name --save

npm install @types/lib-name --save-dev

然后打开 src/tsconfig.app.json 并将其添加到 types 数组中：

“类型”：[“库名称”]

如果您为其添加类型的库仅用于您的 e2e 测试，而是使用 e2e/tsconfig.e2e.json。单元测试也是如此 和 src/tsconfig.spec.json。

如果库在 @types/ 上没有可用的类型，您可以 仍然通过手动添加类型来使用它：

首先，在您的 src/ 文件夹中创建一个 typings.d.ts 文件。

此文件将自动包含为全局类型定义。 然后，在 src/typings.d.ts 中，添加如下代码：

声明模块“无类型包”；

最后，在使用该库的组件或文件中，添加 以下代码：

import * as typelessPackage from 'typeless-package'; typelessPackage.method();

完成。注意：您可能需要或发现定义更多类型的有用 您尝试使用的库。

Answer 21

我遵循了允许 allowSyntheticDefaultImports 的建议（因为现在没有导出可供我使用），使用 System.然后我按照某人的建议使用：

import moment from 'moment';

在我的 system.js 配置中映射时刻。由于某种原因，其他导入语句对我不起作用

Answer 22

使用 systemjs 我所做的是，在我的 systemjs.config 中，我为 moment 添加了映射

map: {
   .....,
   'moment': 'node_modules/moment/moment.js',
   .....
}

然后你就可以轻松导入moment

import * as moment from 'moment'