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

Posted 2023-02-22

【中文标题】如何在 Angular 2 应用程序中包含时刻时区

【英文标题】：How to Include moment-timezone in Angular 2 App

【发布时间】：2016-12-05 02:47:46

【问题描述】：

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

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

【问题讨论】：

你能从momentzone导入时刻吗

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

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

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

你安装了typings typings install --save moment

【参考方案1】：

这是我用的

moment(currentTime).tz(timeZone);

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

【参考方案2】：

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

【参考方案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 的依赖项。

【参考方案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.
  

【讨论】：

为什么 sudo 用于 npm 安装？这不应该避免吗？

【参考方案5】：

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

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

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

【讨论】：

在添加包含的类型后解决了部分问题但给出错误错误：XHR 错误（404 未找到）加载localhost:3000/node_modules/moment(...) if include import 'moment-timezone';请帮忙

【参考方案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

【讨论】：

解决了几乎所有问题，但如果我包含 import 'moment-timezone';那么应用程序将不会加载错误 Error: XHR error (404 Not Found) loading localhost:3000/node_modules/moment(...) and not included tz 将给出错误。请帮忙

能否请您详细说明您的意思

typings install moment moment-timezone --save --global ---如果我执行这个错误来----typings WARN hastypings Typings for "moment" already exists in "node_modules\momnt\moment .d.ts”。您应该让 TypeScript 解析打包的类型并卸载由 Typings 安装的副本

只是一个错字，抱歉

是的，这是意料之中的。这说明moment 已经嵌入了类型。问题是那些（嵌入的）类型与moment-timezone 的类型不兼容。因此该命令会为moment 安装不同的类型，这会覆盖嵌入的类型，并且 与moment-timezone 的类型兼容。