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

How to Include moment-timezone in Angular 2 App

提问by Sandeep Chikhale

I realize, this question is repeated but previous once does not provide apt answer moment package was already installed

我意识到，这个问题是重复的，但上一次没有提供恰当的答案，已经安装了软件包

1.Installed package

1.安装包

npm install moment-timezone --save

npm install moment-timezone --save

Inside node_modulesdirectory
|
|--moment
|--moment-timezone

在node_modules目录中
|
|--moment
|--moment-timezone

directories present

目录存在

2.Index.htmlincluded script

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 file

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'));

   }
}

What should be imported to prevent error Property tz does not exist on type 'Moment'

应该导入什么以防止错误 'Moment' 类型上不存在属性 tz

回答by vishvas chauhan

This might help.

这可能会有所帮助。

Run Following command for angular-cli or npm install.

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

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

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

for npm systemjs.config.js

对于 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'
      }
}

where ever you want to use time-zone in .ts file

你想在 .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.
  }

回答by Matt

Updated for Angular 4

为 Angular 4 更新

Install moment-timezoneon your command line:

moment-timezone在命令行上安装：

npm i -S moment-timezone

Import moment-timezonein your component:

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

import * as moment from 'moment-timezone';

Use it according to docs:

根据文档使用它：

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

16:20:42 EDT

16:20:42 美国东部时间

docs

文档

moment docs

时刻文档

moment timezone docs

时刻时区文档

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

注意：moment故意没有安装或导入，因为它是moment-timezone.

回答by vulp

To install moment-timezonefor Angular in 2018:

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

1. Install moment.js and moment-timezone

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

2. Import these modules in your .ts file

   import * as moment from 'moment'; import '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 issue: How to resolve the 'tz' build error.

Github 问题：如何解决“tz”构建错误。

回答by acdcjunior

That error says the Typescript compiler can't find the .tz(...)method on moment's type definitions (typings).

该错误表示，打字稿编译器无法找到.tz(...)关于方法moment的类型定义（分型）。

All you have to do is install moment-timezone's typings, so it adds tzto moment().

你所要做的就是安装moment-timezone的类型，所以它添加tz到moment().

(You usually install typings for every lib you are going to use. The thing is that some, such as angular and moment, have their type definition files embedded in the libs' sources themselves, thus freeing you from the need to install theirtypings.)

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

So, as said, just install moment-timezone's typings:

因此，moment-timezone如上所述，只需 install的类型：

# 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

And everything should work... if you do one thing more:

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

Rename your configs from momentzoneto moment-timezone(and add the .jsfiles):

将您的配置重命名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' }
};

That is needed because the name you use here is the name you are going to use in the import. And the name you use in the importis the name the typescript compiler will use to find the type definitions. And the typings you installed define a module called moment-timezone, not momentzone.

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

After that, use:

之后，使用：

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

That should be all.

这应该是全部。

---

---

PS.: In the settings above, your compiler will pick moment's typings from moment's source AND moment-timezone's typings (the tzfunction) from the DefinitelyTyped repository (typings.json).

PS：在设置上面，你的编译器将挑选moment的从分型moment的源AND'moment-timezone的分型（在tz从DefinitelyTyped库（typings.json）函数）。

Sometimes, though, they don't play nice. If that happens to you, you'll have to override moment's typings from source with moment's typings from the DefinitelyTyped repository (typings.json).

但有时，他们玩得并不好。如果这种情况发生在您身上，您将不得不moment使用moment来自绝对类型存储库 (typings.json) 的类型覆盖来自源的类型。

In other words do:

换句话说：

# 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

回答by Josh Garwood

I was having the same issue, and did everything that acdcjunior suggested, but also had to install the typings for moment-node:

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

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

After doing this it worked like a charm.

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