在Angular 2（Angular CLI）中添加moment

Question

在Angular 2（Angular CLI）中添加moment

angularangular-cli

8

我遵循了GitHub页面上的cli指南，但是我无法让它在我的应用程序中正常工作。
以下是我所做的：

安装moment： npm install moment --save
安装moment ts typings： npm install @types/moment --save
在我的一个组件中引入了moment： import * as moment from 'moment';

我收到以下错误消息：

有任何想法吗？

- vlio20

其实，我刚刚意识到你做了和我的答案一样的事情，但仍然出现了这个错误。如果是这样，请问你正在使用哪个版本的 webpack？ - choz

将Moment.js添加到Angular-CLI的步骤：https://medium.com/@jek.bao.choo/steps-to-add-moment-js-to-angular-cli-f9ab28e48bf0 - Jek

4个回答

2

这个帖子有点老了，但这正是我需要的。Moment现在附带有一个类型定义文件，@types/moment已经被弃用，推荐使用这个新文件。为了让moment与其他扩展自moment类型定义的库（如fullcallendar）一起工作，您还需要在tsconfig.app.json中覆盖默认模块解析。

"compilerOptions": {
    ...
    "paths": {
        "moment": [
          "../node_modules/moment/moment.d.ts", 
          "../node_modules/moment/min/moment.min.js"
        ]
    },
},

您还需要更新angular.json中的构建部分以包含moment:

 "build": {
      ...,
      "options": {
        ...
        "scripts": [ "node_modules/moment/min/moment.min.js"]
 },

- user1187839

1

我需要更新我的cli版本：


npm uninstall -g angular-cli @angular/cli
npm cache clear 
npm install -g @angular/cli@latest

- vlio20

最新版本应该是： npm uninstall -g @angular/cli npm cache clear npm install -g @angular/cli - curtybear

1

您只需要使用CommonJS语法来包含moment，而不是使用import语法。请尝试以下方法：

let moment = require('moment');

这是因为moment目前还不是ES6模块，因此不能与更新的import语法一起使用。

更新：

想一想，我只在我的单元测试中使用了这种方法。在应用程序中使用它可能不会像这种方式那样工作，因为这种方法使用了node的require，无法在客户端使用。

然而，在组件中使用Moment时，您可以使用angular2-moment。完整的设置说明可以在GitHub页面上找到，但使用方法如下：

<div>today is {{ Date.now() | amDateFormat:'LL' }}</div>

还有一些其他的管道可以使用，所有这些都在 GitHub 页面上有记录。

更新2：

从v2.10.0开始，Moment现在支持ES6语法，因此您应该能够使用任何ES6 import语法而不是require。

- Maloric

很棒的回答@Maloric。对我有用。完美。我有一个进一步澄清的问题。使用let moment = require('moment')和import * as moment from 'moment'之间有什么区别？就性能而言。 - Jek

我使用了 require，因为当时 moment 还没有为 ES6 构建（即它没有使用 export）。我相信在 2.10.0 中已经转换为 ES6，所以你应该能够使用 import。这样，在你选择的 IDE 中，TypeScript 助手应该会捕捉到自动完成建议。虽然我不知道性能上是否有显著差异。 - Maloric

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- choz · Accepted Answer

在最新版本的angular-cli中安装第三方库变得更加简单。 (这是webpack版本，而不是systemjs版本)。

转到项目根目录下的angular-cli.json并进行以下配置：

{
  ...
  "apps": [
     ...
     "scripts": [
        "../node_modules/moment/min/moment.min.js"
     ]
     ...
  ]
  ...
}

最后，在您的any.component.ts中，您可以像这样导入它：

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';

@Component({
    selector: '[id=home]',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    constructor() { }

    ngOnInit () {
        console.log('today is', moment());
    }
}