如何在 Angular 2 应用程序中包含时刻时区

Question

我意识到，这个问题是重复的，但以前的一次没有提供恰当的答案 时刻包已经安装

1.安装包

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.内部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

Answer 1

这是我用的

moment(currentTime).tz(timeZone);

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

Answer 2

在 2018 年为 Angular 安装 moment-timezone：

1. 安装 moment.js 和 moment-timezone

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

2. 在您的 .ts 文件中导入这些模块

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

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

Answer 3

为 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 美国东部时间

文档

moment docs

moment timezone docs

注意：moment 是故意不安装或导入的，因为它是 moment-timezone 的依赖项。

Answer 4

这可能会有所帮助。

为 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 5

我遇到了同样的问题，按照 acdcjunior 的建议做了所有事情，但还必须为 moment-node 安装类型：

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

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

Answer 6

该错误表示 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 的类型，并从DefinitelyTyped 存储库（typings.json）中选择moment-timezone 的类型（tz 函数） )。

不过，有时它们玩得并不好。如果这种情况发生在您身上，您将不得不使用来自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