我尝试使用它与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()时,我得到一个错误。
应该是简单的,谁能提供一个命令行/导入组合,将工作?
Moment是第三方全球资源。moment对象位于浏览器的窗口上。因此,在你的angular2应用中导入它是不正确的。相反,在加载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" />
模块加载力矩
首先,你需要设置一个模块加载器,比如System.js来加载moment commonjs文件
System.config({
...
packages: {
moment: {
map: 'node_modules/moment/moment.js',
type: 'cjs',
defaultExtension: 'js'
}
}
});
然后将moment导入到需要使用的文件中
import * as moment from 'moment';
or
import moment = require('moment');
编辑:
还有一些捆绑器的选项,如Webpack或SystemJS builder或Browserify,将保持窗口对象的时刻。欲了解更多相关信息,请访问它们各自的网站获取指导。
尝试在tsconfig.json中添加" allowsyntheticdefaulultimports ": true。
国旗的作用是什么?
这基本上是告诉TypeScript编译器,可以使用ES6导入语句,即。
import * as moment from 'moment/moment';
在CommonJS模块上,比如Moment.js,它没有声明默认导出。该标志只影响类型检查,不影响生成的代码。
如果你使用SystemJS作为模块加载器,这是必要的。如果你告诉TS编译器你使用SystemJS,该标志将自动打开:
"module": "system"
如果ide被配置为使用tsconfig.json,这也将删除由它们抛出的任何错误。
——2017年11月1日更新
Typings现在已弃用,被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');
对于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'}
};
对于ANGULAR CLI用户
使用外部库在这里的文档中:
https://github.com/angular/angular-cli/wiki/stories-third-party-lib
Simply install your library via
npm install lib-name --save
and import it in your code. If the library does not include typings,
you can install them using:
npm install lib-name --save
npm install @types/lib-name --save-dev
Then open src/tsconfig.app.json and add it to the types array:
"types":[ "lib-name" ]
If the library you added typings for is only to be used on your e2e
tests, instead use e2e/tsconfig.e2e.json. The same goes for unit tests
and src/tsconfig.spec.json.
If the library doesn't have typings available at @types/, you can
still use it by manually adding typings for it:
First, create a typings.d.ts file in your src/ folder.
This file will be automatically included as global type definition.
Then, in src/typings.d.ts, add the following code:
declare module 'typeless-package';
Finally, in the component or file that uses the library, add the
following code:
import * as typelessPackage from 'typeless-package';
typelessPackage.method();
Done. Note: you might need or find useful to define more typings for
the library that you're trying to use.
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。t等等。
每一个都包含等效管道的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 . UPDATE Angular =>
{
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'.
我自己在Angular中使用Moment的版本
NPM I瞬间——保存
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不会给你任何自动补全,但如果你将声明type moment interface from _moment namespace from 'moment' package initialized with moment namespace invoked _moment()会给你自动补全moment的api。
我认为这是使用moment而不使用@types类型或angular提供程序的最具角度的方式,如果你正在寻找像moment这样的普通javascript库的自动完成。
对于Angular 7+(也支持8,9,10,11):
1:通过命令npm Install moment——save安装moment
2:不要在app.module.ts中添加任何东西
3:只需要在你的组件或任何其他文件的顶部添加import语句,就像这样:import * as moment from 'moment';
4:现在你可以在代码的任何地方使用moment。就像:
myDate = moment(someDate)。格式(“MM / DD / YYYY HH: MM”);