Question

我跟随了cli github page的指导线。但我无法在我的应用程序中使用它。
这是我做的：

安装时刻：npm install moment --save
安装时刻ts typings：npm install @types/moment --save
我的某个组件中的导入时刻：import * as moment from 'moment';

我收到以下错误： img http://image.prntscr.com/image/3a64732128ae49c1907e754ae056e879.png

有什么想法吗？

Answer 1

在最新版本的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());
    }
}

Answer 2

您只需要包括使用CommonJS语法包含时刻，而不是导入。请尝试以下方法：

let moment = require('moment');

这是因为片刻还不是ES6模块，因此不会使用较新的import语法。

<强>更新

当我考虑它时，我在单元测试中只使用了这种方法。在您的应用中使用它可能无法以相同的方式工作，因为此方法使用节点require，这不能用于客户端。

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

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

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

更新2：

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

Answer 3

我必须更新我的cli版本： npm uninstall -g angular-cli @angular/cli npm cache clear npm install -g @angular/cli@latest

Answer 4

此线程有点旧，但这是我需要的。 Moment现在带有一个类型定义文件，现在不赞成使用@types/moment来支持这个新文件。为了能够与其他从fullcallendar开始扩展类型定义的库一起工作，您还需要在 tsconfig.app.json

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

您还需要更新您的 angular.json 构建部分，以包含相关信息：

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

将角度添加到角度2（角度cli）

4 个答案: