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

时间：2016-02-03 00:03:11

标签： typescript angular

我尝试将它与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（）时，我收到一个错误。 应该很简单，任何人都可以提供一个可以工作的命令行/导入组合吗？

23 个答案:

答案 0 :(得分：429)

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，您可以执行此操作，例如：

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

答案 1 :(得分：96)

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

要使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，它们可以保留窗口对象的瞬间。有关这些的更多信息，请访问各自的网站以获取指导。

答案 2 :(得分：49)

以下对我有用。

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

typings install moment --save

（注意：不是--ambient）

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

import * as moment from 'moment';

答案 3 :(得分：28)

我会跟随以下内容：

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

答案 4 :(得分：25)

我们现在正在使用模块，

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

在npm install angular2-moment

之后

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

答案 5 :(得分：22)

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

npm install moment --save

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

import * as moment from "moment";

答案 6 :(得分：14)

---更新11/01/2017

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

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

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

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

2 - 在HTML文件中添加脚本标记：

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

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

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

---原始回答

只需3个步骤即可完成：

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

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

2 - 在HTML文件中添加脚本标记：

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

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

    List<String> arr = Arrays.asList(IMGS);
    Collections.shuffle(arr);
    IMGS = arr.toArray(IMGS);

答案 7 :(得分：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 =＆gt; 5 

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

对我来说，工作是为了刺激 还有通用的

我不喜欢使用任何但使用时刻.Moment 我得到了

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

答案 8 :(得分：8)

angular2-moment库的管道类似于{{myDate | amTimeAgo}}在.html文件中使用。

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

npm install --save angular2-moment

在node_modules / angular2-moment中，现在将是＆＃34; .pipe.d.ts＆＃34;文件如 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');
}

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

答案 9 :(得分：5)

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

答案 10 :(得分：5)

对于 Angular 7 + ：

1：通过命令npm install moment --save

安装时刻

2：请勿在{{1​​}}

中添加任何内容

3：只需在app.module.ts或诸如此类的其他任何文件的顶部添加导入语句：component

4：现在您可以在代码中的任何地方使用import * as moment from 'moment';。就像：

moment

答案 11 :(得分：5)

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

从那里为我工作正常。

答案 12 :(得分：5)

如果您可以添加更多第三方软件包，我使用了angular2-moment库。安装非常简单，您应该遵循README的最新说明。我也安装了typings。

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

答案 13 :(得分：4)

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

请参阅：https://github.com/moment/moment/pull/3280

答案 14 :(得分：4)

除了SnareChop的回答之外，我还得更改了momentjs的打字文件。

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

export = moment;

与

export default moment;

答案 15 :(得分：3)

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

国旗的作用是什么？

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

import * as moment from 'moment/moment';

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

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

"module": "system"

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

答案 16 :(得分：3)

我自己在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的{​​{1}}接口声明时刻'moment'包初始化时调用了时刻命名空间{{1}给你自动完成时刻的api。

我认为这是在不使用_moment() @types或角度提供程序的情况下使用时刻的最有角度的方式，如果你正在寻找像香草javascript库那样的自动完成时刻。

答案 17 :(得分：2)

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

答案 18 :(得分：2)

对于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数组中：

     
    

“types”：[“lib-name”]

  
     

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

     

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

     
    

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

  
     

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

     
    

声明模块'typeless-package';

  
     

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

     
    

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

  
     

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

答案 19 :(得分：1)

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

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

然后您只需执行

即可轻松导入moment 
import * as moment from 'moment'

答案 20 :(得分：1)

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

  1. 首先安装npm install moment --save
  2. 在我的组件中需要来自node_modules并使用它：
    3. const moment = require('../../../node_modules/moment/moment.js');

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

答案 21 :(得分：1)

以下对我有用：

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

在typings存储库中不存在moment-node。您需要重定向到Definitely Typed才能使用前缀dt。

使其工作

答案 22 :(得分：0)

我遵循建议允许allowSyntheticDefaultImports（因为从我那里开始没有导出），使用System。然后我按照别人的建议使用：

import moment from 'moment';

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

相关问题
最新问题