在Angular 2打字稿应用程序中使用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,所以我可以在打字/主/环境/时刻节点和打字/主/环境/时刻看到正确的打字

现在,如果在我的代码中我使用import * as moment from 'moment';typescript编译运行顺利,我可以在Atom编辑器中看到正确的建议(如果我开始moment().我可以看到year(),month()等).但是,如果我在浏览器中运行我的代码,它会给出一个错误,说'时刻不是一个函数'(调试我可以看到那个时刻是一个有很多方法的对象).

如果我import moment from 'moment';在浏览器中编写代码运行正常,但是typescript编译失败,"模块时刻没有默认导出",并且在编写代码时我无法从Atom获得任何建议.

我究竟做错了什么？在Angular 2打字稿应用程序中导入moment.js(和任何非打字稿库)的正确方法是什么？

Answer 1

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

npm i——节省时间

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

      ...
    ]
  });
};

编辑-->系统配置.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 2

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