如何在angular 2 typescript应用程序中使用moment.js库?

我尝试使用它与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()时，我得到一个错误。 应该是简单的，谁能提供一个命令行/导入组合，将工作?< / p >
340231 次浏览
小开

moment是一个第三方全局资源。moment对象位于浏览器中的window上。因此，在你的angar2应用中import它是不正确的。相反，在加载moment.js文件的html中包含<script>标记。

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

declare var moment: any;

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

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

或者使用tsd来安装moment.d.ts文件，TypeScript可以自己找到这个文件。

例子

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来加载moment commonjs文件

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

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

import * as moment from 'moment';

或

import moment = require('moment');

编辑:

还有一些捆绑器的选项，如Webpack或SystemJS builder或Browserify，将保持窗口对象的时刻。欲了解更多相关信息，请访问它们各自的网站获取指导。

小开

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

在moment-node.d.ts中我替换了:

export = moment;

与

export default moment;
小开

如果你愿意添加更多的第三方包，我使用了angular2-moment库。安装非常简单，您应该遵循README上的最新说明。因此，我还安装了打字。

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

小开

下面的方法对我很有效。

首先，安装moment的类型定义。

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

在你的组件。ts使用: import * as moment from 'moment/moment'; < / p >

就是这样。你可以从组件的类中使用:

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

小开

不确定这对人们来说是否仍然是一个问题，然而……使用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;

在那里工作对我来说很好。

小开

下面的方法对我很有效:

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

类型存储库中不存在moment-node。您需要重定向到Definitely Typed，以便使用前缀dt使其工作。

小开

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

国旗的作用是什么?

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

import * as moment from 'moment/moment';

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

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

"module": "system"

这也将删除ide抛出的任何错误，如果它们被配置为使用tsconfig.json。

小开

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

看:https://github.com/moment/moment/pull/3280

小开

——2017年11月1日更新

打字现在已弃用，它已被npm @types所取代。从现在开始，除了npm，获取类型声明将不需要任何工具。要使用Moment，你不需要通过@types安装类型定义，因为Moment已经提供了它自己的类型定义。

因此，它简化为3个步骤:

1 -安装时刻，包括类型定义:

npm install moment --save

2 -在HTML文件中添加script标签:

<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标签:

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

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

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

我遵循了允许allowSyntheticDefaultImports的建议(因为没有从时刻到我使用的导出)，使用System。然后我听从别人的建议使用:

import moment from 'moment';

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

小开

对于angar2 RC5，这为我工作…

第一次安装时刻通过NPM

npm install moment --save

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

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'}
};
小开

对于angar2和systemjs和JSPM必须做:

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();
小开

我们现在使用模块，

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

npm install angular2-moment后

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

小开

在systemjs中，我所做的是。我为moment添加了map

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

然后你可以很容易地导入moment

import * as moment from 'moment'
小开

要在Typescript项目中使用它，你需要安装moment:

npm install moment --save

在安装moment之后，你可以在导入它之后在任何.ts文件中使用它:

import * as moment from "moment";

小开

对于ANGULAR CLI用户

使用外部库在这里的文档中:

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

简单地安装你的库通过

NPM安装lib-name

并在代码中导入它。如果库不包含类型， 你可以使用

来安装它们

NPM安装lib-name

NPM install @types/lib-name

然后打开src/tsconfig.app。Json，并将其添加到types数组:

"types":["lib-name"]

如果您为之添加类型的库仅用于您的端到端 测试时，使用e2e/tsconfig.e2e.json。单元测试也是如此 和src / tsconfig.spec.json。< / p > 如果库在@types/中没有可用的类型，您可以 仍然可以通过手动添加类型来使用它:

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

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

声明模块'无类型-包';

最后，在使用库的组件或文件中添加 代码:< / p >

import * as typelessPackage from 'typeless-package'; typelessPackage.method ();< / p >

< p >。注意:您可能需要或发现为其定义更多类型是有用的

小开

angular2-moment库有像\{\{myDate | amTimeAgo}}这样的管道用于.html文件中。

这些管道也可以作为组件类(.ts)文件中的Typescript函数来访问。首先按照提示安装库:

npm install --save angular2-moment

在node_modules/angular2-moment现在将是“.pipe.d”。诸如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');
}

要使用任何函数都遵循这个过程。如果有一种方法可以访问所有的函数，那就太好了，但上面的解决方案都不适合我。

小开
最佳答案

2017年4月更新:

从版本2.13.0开始，Moment包含了一个typescript定义文件。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");
小开

使用ng命令行

> npm install moment --save

在app.module

import * as moment from 'moment';


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

在组件

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

这样你就导入了一次时刻

5 . Angular =>

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

为我工作在prod与aot 还有通用的

除了利用片刻，我什么都不喜欢。时刻 我得到了< / p > 
Error   Typescript  Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'.
小开

我自己在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'包初始化moment命名空间，调用_moment()可以自动补全moment的api。

我认为这是在不使用@types typings或angular提供程序的情况下使用moment的最具角度的方式，如果你正在寻找像moment这样的普通javascript库的自动补全。

小开

Angular 7+(也支持8,9,10,11):

1:通过命令npm install moment --save安装moment

2: 不在app.module.ts中添加任何东西

3:只要在你的component或任何其他像这样的文件的顶部添加import语句:import * as moment from 'moment';

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

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


提交答案