如何在angular 2打字本应用程序中使用moment.js库？

Question

我尝试将它与typescript绑定一起使用:

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支持!

奖励编辑:要像Moment在Typescript中键入变量或属性,您可以这样做:

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

Answer 2

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构建器或Browserify,它们可以保留窗口对象的瞬间.有关这些的更多信息,请访问他们各自的网站获取指导.

Answer 3

以下对我有用.

首先,暂时安装类型定义.

typings install moment --save

(注意:NOT --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项目中使用它,您需要安装时刻:

npm install moment --save

安装片刻后,您可以.ts在导入后在任何文件中使用它:

import * as moment from "moment";

Answer 7

---更新11/01/2017

分型现在已经过时,它是由替代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 8

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

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

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)

这样你导入一次

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'.

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

除了 SnareChop 的答案之外，我还必须更改 momentjs 的打字文件。

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

export = moment;

和

export default moment;

Answer 12

如果您可以添加更多第三方软件包,我使用了angular2-moment库.安装非常简单,您应该遵循README的最新说明.由于这个原因,我也安装了打字机.

对我来说就像一个魅力,几乎没有添加任何代码来使它工作.

Answer 13

不确定这对于人们来说是否还是一个问题,但是...使用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 14

对于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'}
  };

Answer 15

我自己在 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 ，则可以自动完成 moment 的 api。_moment'moment'_moment()

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