web-dev-qa-db-ja.com

Angular 2アプリにmoment-timezoneを含める方法

この質問は繰り返されますが、以前はパッケージが既にインストールされていた瞬間に適切な回答を提供していません

1。インストール済みパッケージ

npm install moment-timezone --save

内部node_modulesディレクトリ
|
|-モーメント
| --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' }
  };

.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'に存在しません

node.jsangularangular2-directivesangular-moment
15
Sandeep Chikhale

これが役立つかもしれません。

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.
  }
20
vishvas chauhan

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

docs

モーメントドキュメント

モーメントタイムゾーンドキュメント

注：momentは、moment-timezoneの依存関係であるため、意図的にインストールまたはインポートされませんでした。

18
Matt

moment-timezonefor Angular in 2018：

  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」ビルドエラーの解決方法

4
vulp

そのエラーは、TypeScriptコンパイラがmomentの型定義（型指定）で.tz(...)メソッドを見つけられないことを示しています。

必要なのは_moment-timezone_のタイピングをインストールするだけなので、tzをmoment()に追加します。

（通常、使用するすべてのlibにタイピングをインストールします。問題は、angularおよびmomentなど）の一部がタイプ定義ファイルをlibsのソース自体に埋め込んでいるためです。 their typingsをインストールする必要がなくなります。）

したがって、前述のように、_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コンパイラが型定義の検索に使用する名前です。そして、インストールしたタイピングは、momentzoneではなく、_moment-timezone_というモジュールを定義します。

その後、次を使用します。

_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関数）を選択します。

しかし、時々、彼らはニースをプレイしません。その場合は、ソースからのmomentのタイピングをDefinitelyTypedリポジトリ（typings.json）からの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
_
0
acdcjunior

私は同じ問題を抱えていて、acdcjuniorが示唆したことをすべて行いましたが、moment-nodeのタイピングもインストールする必要がありました。

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

これを行った後、それは魅力のように働いた。

0
Josh Garwood