如何在angular 2打字稿应用程序中使用moment.js库？-Java 学习之路

158

我尝试将它与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 回答

28
Update April 2017:

从版本2.13.0开始，Moment包含一个打字稿定义文件 . https://momentjs.com/docs/#/use-it/typescript/

只需在控制台类型中使用npm安装它
```
npm install --save moment
```
然后在你的Angular应用程序中，导入就像这样简单：
```
import * as moment from 'moment';
```
就是这样，你获得了完整的Typescript支持！

Bonus edit: 要在Typescript中键入变量或属性为 Moment ，您可以这样做：
```
let myMoment: moment.Moment = moment("someDate");
```
回复于 2024-05-04T02:45:12+08:00
14
moment 是第三方全球资源 . 时刻对象位于浏览器的 window 上 . 因此，在angular2应用程序中 import 它是不正确的 . 而是在html中包含 <script> 标记，它将加载moment.js文件 .

要使TypeScript满意，您可以添加
```
declare var moment: any;
```
在文件的顶部，您可以使用它来停止编译错误，或者您可以使用
```
///<reference path="./path/to/moment.d.ts" />
```
或者使用tsd来安装TypeScript可能在其上找到的moment.d.ts文件 .

Example
```
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" />
```
Module loading 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，它们可以保留窗口对象的瞬间 . 有关这些的更多信息，请访问他们各自的网站获取指导 .
回复于 2024-05-04T02:45:12+08:00
96
以下对我有用 .

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

typings install moment --save

（注意：不 --ambient ）

然后，解决缺乏适当的出口：
```
import * as moment from 'moment';
```
回复于 2024-05-04T02:45:12+08:00
2

我会跟随以下内容：

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

回复于 2024-05-04T02:45:12+08:00
366

我们现在正在使用模块，

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

在 npm install angular2-moment 之后

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

回复于 2024-05-04T02:45:12+08:00
2

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

npm install moment --save

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

import * as moment from "moment";

回复于 2024-05-04T02:45:12+08:00
1
--- Update 11/01/2017

Typings 现已弃用，已被 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');
```
--- Original answer

这可以通过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');
```
回复于 2024-05-04T02:45:12+08:00

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

回复于 2024-05-04T02:45:12+08:00

1
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');
}
```
要使用任何功能，请遵循此过程 . 如果有一种方法可以访问所有功能，那将是很好的，但上述解决方案都不适合我 .
回复于 2024-05-04T02:45:12+08:00
3

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

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

回复于 2024-05-04T02:45:12+08:00

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

从那里工作对我来说很好 .

回复于 2024-05-04T02:45:12+08:00

-1

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

回复于 2024-05-04T02:45:12+08:00

24

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

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

回复于 2024-05-04T02:45:12+08:00
9
除了SnareChop的答案之外，我还得改变momentjs的打字文件 .

在 moment-node.d.ts 我换了：
```
export = moment;
```
同
```
export default moment;
```
回复于 2024-05-04T02:45:12+08:00
1
尝试将 "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抛出的任何错误 .
回复于 2024-05-04T02:45:12+08:00

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

回复于 2024-05-04T02:45:12+08:00

21

For ANGULAR CLI users

使用外部库在此处的文档中：

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并将其添加到类型中array：“types”：[“lib-name”]如果你添加的typing的库只用于你的e2e测试，而是使用e2e / tsconfig.e2e.json . 单元测试和src / tsconfig.spec.json也是如此 . 如果库在@ types /中没有可用的类型，您仍然可以通过手动为其添加输入来使用它：首先，在src /文件夹中创建一个typings.d.ts文件 . 此文件将自动包含为全局类型定义 . 然后，在src / typings.d.ts中，添加以下代码：declare module'typeless-package';最后，在使用该库的组件或文件中，添加以下代码：import * as typelessPackage from'typeless-package'; typelessPackage.method（）;完成 . 注意：您可能需要或找到有用的内容来为您尝试使用的库定义更多类型 .

回复于 2024-05-04T02:45:12+08:00
1
以下对我有用：
```
typings install dt~moment-node --save --global
```
在typings存储库中不存在moment-node . 您需要重定向到Definitely Typed才能使用前缀dt使其工作 .
回复于 2024-05-04T02:45:12+08:00
3
使用systemjs我所做的是，在我的systemjs.config中我添加了 moment 的 Map
```
map: {
   .....,
   'moment': 'node_modules/moment/moment.js',
   .....
}
```
然后你可以轻松导入 moment
```
import * as moment from 'moment'
```
回复于 2024-05-04T02:45:12+08:00
0
我知道这是一个旧线程，但对我来说，实际工作的最简单的解决方案是：
- 首先安装 npm install moment --save
- 在我的组件中需要来自node_modules并使用它：
```
const moment = require('../../../node_modules/moment/moment.js');

@Component({...})
export class MyComponent {
   ...
   ngOnInit() {
       this.now = moment().format();
   }
   ...
}
```
回复于 2024-05-04T02:45:12+08:00
4
我自己在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() 给你自动完成时刻's api' s .

我认为这是使用 @types typings 或角度提供程序时使用时刻的最有角度的方式，如果你正在寻找类似于时刻的vanilla javascript库的自动完成 .
回复于 2024-05-04T02:45:12+08:00

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment';


@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    // {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class UserDetailsComponent implements OnInit {

  userDetailsFormGroup = this.fb.group({
    firstName: [''],
    lastName: [''],
    username: [''],
    address: ['', Validators.required],
    dob: [moment(), Validators.required],
    gender: ['', Validators.required],
    contactNumber: ['', Validators.required],
  });



   updateUserProfile() {

   const dobDate = this.userDetailsFormGroup.controls.dob.value;
     const momentDOB1 = dobDate.format('MM/DD/YYYY');

       const body = {
      'firstName': this.userDetailsFormGroup.controls.firstName.value,
      'lastName': this.userDetailsFormGroup.controls.lastName.value,
      'address': this.userDetailsFormGroup.controls.address.value,
      'dob': momentDOB1,
      'gender': this.userDetailsFormGroup.controls.gender.value,
      'contactNumber': this.userDetailsFormGroup.controls.contactNumber.value

    };


    // call http method here
   }


   getUserProfileData(){

   //get http 
    this.http.get<any>(AppSettings.BASE_URL + '/v1/userProfile/getMyProfile').pipe()
      .subscribe(
      data => {
       const dateDob = moment(data.dob, 'MM/DD/YYYY');
         console.log('getting date format :::');
          console.log(dateDob.toISOString());
       this.userDetailsFormGroup.controls.dob.setValue(dateDob);
      }
      );
}

回复于 2024-05-04T02:45:12+08:00

48
我遵循建议允许allowSyntheticDefaultImports（因为我没有从我那里使用导出），使用System . 然后我按照别人的建议使用：
```
import moment from 'moment';
```
随着时间映射在我的system.js配置中 . 由于某种原因，其他进口声明对我不起作用
回复于 2024-05-04T02:45:12+08:00

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

23 回答

国旗是做什么的？

相关问题