首页 文章

在Angular 2打字稿应用程序中使用moment.js

提问于
浏览 次
11

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

这是我到目前为止所做的：

  • 我使用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 安装了打字稿类型，所以我可以看到打字/ main / ambient / moment-node和typings / main / ambient / moment中的正确输入

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

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

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

typescript angular momentjs systemjs

5 回答

  • 0
    import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
    回复于
  • 4

    正如进一步指出的那样，现在船只有自己的打字 . @ angular / cli也改变了 . 更新了我的回答以反映这一点 .

    npm i - 保存时刻

    import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

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

}

    就是@ angular / cli所需要的一切 .

    Below is my old outdated answer.

    使用angular-cli：所以你在VsCode中获得Intellisense

    编辑 - > angular-cli-build.js

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

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

      ...
    ]
  });
};

    编辑 - > system-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);
}
    回复于
  • 1

    我也发现了这个：使用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';
    回复于
  • 4

    从您的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');
    回复于
  • 1

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

    import moment from 'moment';

    一切都会奏效 .

    回复于

相关问题