How to Include moment-timezone in Angular 2 App

Question

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

1.Installed package

npm install moment-timezone --save

Inside node_modules directory
|
|--moment
|--moment-timezone

directories present

2. Index.html included script

<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

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'

import * as moment from 'moment/moment'_____________________ import moment1 from 'momentzone' causing error - Cannot find module 'momentzone' — Sandeep Chikhale, Jul 30 '16 at 15:34
Try moment-timezone and if it finds at compile time then update th system.config to have correct name — Arpit Agarwal, Jul 30 '16 at 15:56
If the module only has side-effects, `import 'momentzone';` should suffice. — acdcjunior, Jul 30 '16 at 15:59
tried - import momet from 'moment-timezone'; error - cannot find module moment-timezone .--------- tried - import 'momentzone'; .. error with tz remains same.------------- tried installing typing but it was alreay installed-------is there need to add defination in typings.json file — Sandeep Chikhale, Jul 30 '16 at 16:11
DId you solve it? I have exactly the same issue, tried all the proposed solutions but nothing works — Vassilis Pits, Aug 05 '16 at 10:11
Also I can see the `tz` function in my console log but compiler doesn't — Vassilis Pits, Aug 05 '16 at 10:14

score 26 · Accepted Answer · answered Jan 11 '17 at 11:59

This might help.

Run Following command for angular-cli or npm install.

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

for 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

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

why sudo for npm install? shouldn't this be avoided? – sgotre Apr 10 '18 at 22:53 — sgotre, Apr 10 '18 at 22:53

score 25 · Answer 2 · answered Sep 15 '17 at 20:59

Updated for Angular 4

Install moment-timezone on your command line:

npm i -S moment-timezone

Import moment-timezone in your component:

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

docs

moment docs

moment timezone docs

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

score 7 · Answer 3 · answered Dec 06 '18 at 19:12

To install moment-timezone for Angular in 2018:

Install moment.js and moment-timezone

npm install moment moment-timezone @types/moment-timezone --save
Import these modules in your .ts file

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

Github issue: How to resolve the 'tz' build error.

score 0 · Answer 4 · answered Jul 30 '16 at 21:33

0

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

All you have to do is install moment-timezone's typings, so it adds tz to 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 their typings.)

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

# 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 momentzone to moment-timezone (and add the .js files):

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 import is 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.

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 tz function) from the DefinitelyTyped repository (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).

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

answered Jul 30 '16 at 21:33

acdcjunior

132,397
37
331
304

Solved almost all problem but if I include import 'moment-timezone'; then app won't load with error Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/moment(…) and not included tz will give error. please help – Sandeep Chikhale Aug 04 '16 at 14:47
could you please elaborate what you mean by <> – Sandeep Chikhale Aug 04 '16 at 14:51
typings install moment moment-timezone --save --global --- if i execute this error comes---- typings WARN hastypings Typings for "moment" already exist in "node_modules\momnt\moment.d.ts". You should let TypeScript resolve the packaged typings and uninstall the copy installed by Typings – Sandeep Chikhale Aug 04 '16 at 15:00
<> was just a typo, sorry – acdcjunior Aug 04 '16 at 15:05
Yes, that is expected. It is telling that `moment` already has typings embedded in it. The thing is that those (embedded) typings are **not** compatible with `moment-timezone`'s typings. So that command installs different typings for `moment`, which overrides the embedded one, and **is** compatible with `moment-timezone`'s typings. – acdcjunior Aug 04 '16 at 15:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120141/discussion-between-sandeep-chikhale-and-acdcjunior). – Sandeep Chikhale Aug 04 '16 at 15:17
@accdcjunior what needs to be done for angular 2.0 latest version. It doesnt have typings. – monica Sep 30 '16 at 07:35
Yes this was the solution for me. – Joao Garin Oct 29 '16 at 09:40
@acdcjunior I imported the moment-timezone like this: `import * as moment from 'moment-timezone';` and it works for me ..... do you know if it has any negative effects? – Damsorian Apr 01 '17 at 23:29
@Damsorian I wouldn't know, things have changed a lot since july of last year (no kidding). But, I'd say, if you don't notice any big misfunction, you probably did it right. – acdcjunior Apr 02 '17 at 14:43

score 0 · Answer 5 · answered Aug 04 '16 at 03:35

0

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

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

After doing this it worked like a charm.

answered Aug 04 '16 at 03:35

Josh Garwood

135
1
13

solved some part of the problem after adding your typings included but giving error Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/moment(…) if include import 'moment-timezone'; Please help – Sandeep Chikhale Aug 04 '16 at 14:50

score 0 · Answer 6 · answered Jun 25 '20 at 18:20

0

This is what i use

moment(currentTime).tz(timeZone);

Here is a working Stackblitz https://stackblitz.com/edit/angular-moment-timezone-23

answered Jun 25 '20 at 18:20

moolsbytheway

1,152
13
20

How to Include moment-timezone in Angular 2 App

6 Answers6

Updated for Angular 4

docs

Linked