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

我试图将其与打字稿绑定一起使用：

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（）时，出现错误。应该很简单，有人可以提供行之有效的命令行/导入组合吗？

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的全面支持！

奖励编辑：要像MomentTypescript中一样键入变量或属性，可以执行以下操作：

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

moment是第三方全球资源。当对象存在于window浏览器中时。因此，import在您的angular2应用程序中它不正确。而是<script>在您的html中包含标记，以加载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 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）也有一些选项，可以使您远离窗口对象。有关这些的更多信息，请访问各自的网站以获取指导。

以下对我有用。

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

typings install moment --save

（注意：NOT --ambient）

然后，要解决缺少适当的出口的问题：

import * as moment from 'moment';

我会选择以下内容：

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');

我们现在正在使用模块，

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

后 npm install angular2-moment

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

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

npm install moment --save

安装时刻.ts后，导入后可以在任何文件中使用它：

import * as moment from "moment";

-更新11/01/2017

现在不推荐使用Typings，而已将其替换为npm @types。从现在开始，除了npm之外，不需要其他任何工具即可进行类型声明。要使用Moment，您不需要通过@types安装类型定义，因为Moment已经提供了自己的类型定义。

因此，它减少到仅三个步骤：

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');

对于Angular 7+（也支持8和9）：

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

2：请勿在 app.module.ts

3：只需在您的component文件或其他任何文件的顶部添加import语句，如下所示：import * as moment from 'moment';

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

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

使用ng CLI

> npm install moment --save

在app.module中

import * as moment from 'moment';

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

在组件中

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

这样，您可以一次导入时刻

UPDATE Angular => 5

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

对我来说，与aot和通用产品一起工作

我不喜欢使用任何东西，但使用瞬间。

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

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');
}

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

如果您可以添加更多的第三方软件包，则可以使用angular2-moment库。安装非常简单，您应该按照README上的最新说明进行操作。我还安装了打字。

对我而言，它就像是一种魅力，几乎没有添加任何代码即可使其正常工作。

不知道这是否仍然是人们的问题，但是...使用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;

从那里对我来说很好。

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

通过npm首次安装

npm install moment --save

然后将时刻导入您要使用的组件中

import * as moment from 'moment';

最后在systemjs.config.js中的“ map”和“ packages”中配置时刻

// 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'}
  };

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

在moment-node.d.ts我替换：

export = moment;

与

export default moment;

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

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

我自己在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);    

}

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

普通导入的矩不会给您任何自动完成功能，但是如果您要从通过调用矩命名空间初始化的包中的命名空间中声明类型Moment接口的矩_moment'moment'_moment()您自动完成矩的api。

我认为@types typings，如果您正在寻找自动的自动完成的矩型javascript库的话，这是不使用或角度提供程序的最即时的方式。

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

旗是做什么的？

这基本上告诉TypeScript编译器可以使用ES6 import语句，即

import * as moment from 'moment/moment';

在未声明默认导出的CommonJS模块（如Moment.js）上。该标志仅影响类型检查，而不影响生成的代码。

如果将SystemJS用作模块加载器，则很有必要。如果您告诉TS编译器您使用SystemJS，则该标志将自动打开：

"module": "system"

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

对于与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();

对于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”：[“ lib-name”]

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

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

首先，在src /文件夹中创建Types.d.ts文件。

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

声明模块'typeless-package';

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

从typeless-package导入*作为typelessPackage；typelessPackage.method（）;

做完了 注意：您可能需要或发现有用的方法是为尝试使用的库定义更多类型。

我遵循建议使用System来允许allowSyntheticDefaultImports（因为从现在起就没有导出可用）。然后我按照某人的建议使用：

import moment from 'moment';

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

以下为我工作：

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

时刻节点在类型存储库中不存在。您需要重定向到Definitely Typed，以使其使用前缀dt起作用。

使用systemjs，我要做的是，在systemjs.config中，我添加了 moment

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

然后你就可以轻松地导入moment只是做

import * as moment from 'moment'

我知道这是一个旧线程，但是对我来说，最有效的最简单的解决方案是：

1. 首先安装 npm install moment --save
2. 在我的组件中，需要使用node_modules并使用它：

const moment = require('../../../node_modules/moment/moment.js');

@Component({...})
export class MyComponent {
   ...
   ngOnInit() {
       this.now = moment().format();
   }
   ...
}