如何在Angular 2应用程序中引入moment-timezone

Question

我知道这个问题已经被问过了，但之前的回答没有提供恰当的答案，而moment包已经安装好了。

1.已安装的包

npm install moment-timezone --save

在node_modules目录下：
|
|--moment
|--moment-timezone

存在这些目录。

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

   }
}

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

'Moment' 类型上不存在 'tz' 属性

- Sandeep Chikhale

---

import * as moment from 'moment/moment'_____________________ import moment1 from 'momentzone' 会导致错误 - 找不到模块 'momentzone' - Sandeep Chikhale

尝试使用moment-timezone，如果在编译时找到，则更新system.config以具有正确的名称。 - Arpit Agarwal

如果模块只有副作用，那么 import 'momentzone'; 就足够了。 - acdcjunior

尝试导入'moment-timezone'，但出现错误 - 找不到'moment-timezone'模块。尝试导入'momentzone'，但时区错误仍然存在。尝试安装typing，但已经安装了。是否需要在typings.json文件中添加定义？ - Sandeep Chikhale

moment-timezone 的 typings 存在吗？ - Arpit Agarwal

Answer 1

这可能会有所帮助。

对于angular-cli或npm安装，请运行以下命令。

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.
  }

- vishvas chauhan

---

为什么在运行npm install时需要使用sudo? 这样做不应该被避免吗？ - sgotre

Answer 2

更新至 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文档

Moment时区文档

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

- Matt

Answer 3

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问题：如何解决'tz'构建错误。

- spaceman

Answer 4

我遇到了同样的问题，尝试了acdcjunior建议的所有方法，但还需要安装moment-node的类型定义：

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

做完这个之后，它就像魔法般地运行了。

- Josh Garwood

---

在添加了您的类型定义后，解决了问题的一部分，但是出现了错误“Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/moment(…)”，如果包括import 'moment-timezone'; 请帮忙解决。 - Sandeep Chikhale

Answer 5

这个错误表示Typescript编译器在moment的类型定义（typings）中找不到.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中使用的名称是typescript编译器用于查找类型定义的名称。您安装的typings定义了一个名为moment-timezone的模块，而不是momentzone。

之后，请使用：

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

就这些了。

---

注意：在上面的设置中，您的编译器将从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

- acdcjunior

---

请问您能否详细说明一下您所说的<>是什么意思？ - Sandeep Chikhale

<>只是一个打错的字，抱歉。 - acdcjunior

让我们在聊天中继续这个讨论。 - Sandeep Chikhale

@acdcjunior 我是这样导入 moment-timezone 的：import * as moment from 'moment-timezone';，它对我来说很有效...... 你知道它是否有任何负面影响吗？ - Damsorian

@Damsorian 我不清楚，自从去年七月以来情况发生了很大变化（不开玩笑）。但是，我想说，如果你没有注意到任何大的故障，那么你可能做得很对。 - acdcjunior

Answer 6

这是我使用的

moment(currentTime).tz(timeZone);

这是一个可运行的 Stackblitz https://stackblitz.com/edit/angular-moment-timezone-23

- moolsbytheway