如何在 Angular 2 App 中包含时刻时区

Question

我知道，这个问题重复了，但前一次没有提供恰当的答案时刻包已经安装

1.Installed 套餐

npm install moment-timezone --save

在node_modules目录中
|
|--时刻
|--时刻时区

目录存在

2. Index.html 包含脚本

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

System.config.js

  var map = {
    'moment':             'node_modules/moment',
    'momentzone':         'node_modules/moment-timezone'
  };
  var packages = {
    'moment':             { defaultExtension: 'js' },
    'momentzone':         { defaultExtension: 'js' }
  };

3.Inside component.ts 文件

import * as moment from 'moment/moment';

export class TimeComponent implements OnInit{
   ngOninit(){
         console.log(moment("2014-06-01T12:00:00Z").tz('America/Los_Angeles').format('ha z'));

   }
}

应该导入什么以防止出错 属性 tz 在类型 'Moment'

上不存在

Answer 1

该错误表示 Typescript 编译器无法在 moment 的类型定义（类型）中找到 .tz(...) 方法。

您所要做的就是安装 moment-timezone 的类型，因此它会将 tz 添加到 moment()。

（您通常会为要使用的每个库安装类型。问题是，有些库，例如 angular 和 moment，将它们的类型定义文件嵌入到库的源代码中，从而释放你不需要安装 他们的 类型。）

因此，如前所述，只需安装 moment-timezone 的类型：

# if you have typings version 1.X.X
typings install moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment-timezone --save --ambient

而且一切都应该有效......如果你再做一件事：

将您的配置从 momentzone 重命名为 moment-timezone（并添加 .js 文件）：

var map = {
    'moment':                  'node_modules/moment/moment.js',
    'moment-timezone':         'node_modules/moment-timezone/moment-timezone.js'
};
var packages = {
    'moment':                  { defaultExtension: 'js' },
    'moment-timezone':         { defaultExtension: 'js' }
};

这是必需的，因为您在这里使用的名称就是您要在 import 中使用的名称。您在 import 中使用的名称是打字稿编译器将用于查找类型定义的名称。您安装的类型定义了一个名为 moment-timezone 的模块，而不是 momentzone.

之后，使用：

import * as moment from 'moment';
import 'moment-timezone'; // since this module only has side-effects, this is enough

应该就这些了。

PS.: 在上面的设置中，您的编译器将从 moment 的源和 moment-timezone 的类型中选择 moment 的类型（tz 函数）来自 DefinitelyTyped 存储库 (typings.json).

不过，有时他们玩得并不好。如果您遇到这种情况，您将不得不使用来自 DefinitelyTyped 存储库 (typings.json) 的 moment 的类型来覆盖来自源的 moment 的类型。

换句话说：

# Only do this if installing moment-timezone alone didn't work...

# if you have typings version 1.X.X
typings install moment moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment moment-timezone --save --ambient

Answer 2

我遇到了同样的问题，并按照 acdcjunior 的建议进行了所有操作，但还必须为 moment-node 安装类型：

typings install dt~moment-node --save --global

这样做之后，它就像一个魅力。

Answer 3

这可能会有所帮助。

运行以下命令用于 angular-cli 或 npm install。

sudo npm install moment moment-timezone --save
npm install @types/moment @types/moment-timezone --save-dev

对于 npm systemjs.config.js

   map: {
        'moment': 'npm:moment',
        'moment-timezone': 'npm:moment-timezone/builds'
      }
packages: { 
      'moment': {
          main: './moment.js',
          defaultExtension: 'js'
       },
      'moment-timezone': {
        main: './moment-timezone-with-data-2010-2020.min.js',
        defaultExtension: 'js'
      }
}

您想在 .ts 文件中的什么地方使用时区

import * as moment from 'moment-timezone';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

export class AppComponent {    
  name = 'Angular';
  jun = moment();// creating obj.
  constructor() {
    this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z');
    console.log(this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z'));
    console.log(moment.tz.names()); // for all time zone.
  }

Answer 4

更新 Angular 4

在您的命令行上安装 moment-timezone：

npm i -S moment-timezone

在您的组件中导入 moment-timezone：

import * as moment from 'moment-timezone';

根据文档使用：

this.time = moment().tz('America/New_York').format('HH:mm:ss z')

16:20:42 EDT

文档

moment docs

moment timezone docs

note: moment was intentionally not installed or imported as it is a dependency of moment-timezone.

Answer 5

要在 2018 年为 Angular 安装 moment-timezone：

安装moment.js和moment-timezone

npm install moment moment-timezone @types/moment-timezone --save
将这些模块导入您的 .ts 文件

import * as moment from 'moment'; import 'moment-timezone';

Github 问题：How to resolve the 'tz' build error.

Answer 6

这是我用的

moment(currentTime).tz(timeZone);

这是一个有效的 Stackblitz https://stackblitz.com/edit/angular-moment-timezone-23

如何在 Angular 2 App 中包含时刻时区

How to Include moment-timezone in Angular 2 App

node.js

angular-moment

angular2-directives

angular

更新 Angular 4

文档