在 Angular 2 typescript 应用程序中使用 moment.js

Question

我正在努力在 Angular 2 Typescript 应用程序中使用 moment.js 库。即使在阅读的答案后，我也无法让它工作。

这是我目前所做的：

我使用npm安装了moment.js，所以我可以在node_modules/moment/moment.js

我配置了System.js来检索矩库：

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

我用 typings install moment-node --ambient --save 和 typings install moment --ambient --save 安装了打字稿打字，所以我可以在 typings/main/ambient/moment-node 和 typings/main/ambient/moment

现在，如果在我的代码中使用 import * as moment from 'moment'; 打字稿编译运行顺利，我可以在 Atom 编辑器中看到正确的建议（如果我从 moment(). 开始，我可以看到年份()、月份()等)。但是，如果我运行我的代码在浏览器中，它会给出一个错误，说 'moment is not a function' （调试我可以看到那一刻是一个有很多方法的对象）。

如果我在浏览器中编写 import moment from 'moment'; 代码运行没问题，但是打字稿编译失败 'module moment has no default export' 并且在编写代码时我无法从 Atom 获得任何建议。

我做错了什么？在 Angular 2 typescript 应用程序中导入 moment.js（和任何非 typescript 库）的正确方法是什么？

Answer 1

import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;

Answer 2

我还发现了这个：使用 NPM 安装 Moment.js：

npm install moment

将其添加到您的 SystemJS 配置中：

map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

您还需要接口： tsd install moment --save 然后添加：

/// <reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';

Answer 3

当您使用 namespace 语法导入模块以将导出收集到单个对象上时，如 import * as moment from 'moment' 中那样，您并没有导入实际的 moment 对象模块出口，而是它的所有成员。您正在丢失呼叫签名。要解决此问题，在 SystemJS + TypeScript 项目中，为模块指定 "system" 的值或为 allowSyntheticDefaultImports 指定 true 的值，将它们传递给 TypeScript 编译器，最好通过 tsconfig.json文件。然后像这样导入时刻

import moment from 'moment';

一切正常。

Answer 4

正如进一步指出的那样，moment 现在带有自己的类型。 @angular/cli 也发生了变化。更新了我的答案以反映这一点。

npm i --save moment

import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

是@angular/cli 所需要的全部。

以下是我的旧答案。

使用 angular-cli：因此您可以在 VsCode

中获得 Intellisense

编辑 --> angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', // add this line

      ...
    ]
  });
};

编辑 --> 系统-config.ts

const map: any = {
  moment: 'vendor/moment/min/moment.min.js' // add this line
};

在你的组件中：

import * as moment from 'moment';

...
// example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.push(date);
}

Answer 5

从您的 index.html 添加

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

在您的组件中使用：

declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');

在 Angular 2 typescript 应用程序中使用 moment.js

Using moment.js in Angular 2 typescript application

momentjs

typescript

systemjs

angular