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'

Moorfowl

Can you import moment from momentzone – Abatement

import * as moment from 'moment/moment'_____________________ import moment1 from 'momentzone' causing error - Cannot find module 'momentzone' – Moorfowl

Try moment-timezone and if it finds at compile time then update th system.config to have correct name – Abatement

If the module only has side-effects, import 'momentzone'; should suffice. – Bonham

Have you installed typings typings install --save moment – Abatement

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 – Moorfowl

typings for moment-timezone does it exist ? – Abatement

What version of typings are you using? – Bonham

DId you solve it? I have exactly the same issue, tried all the proposed solutions but nothing works – Hoedown

Also I can see the tz function in my console log but compiler doesn't – Hoedown

Answer 1

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

Blackman

why sudo for npm install? shouldn't this be avoided? – Unwonted

Answer 2

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.

Lailalain

Answer 3

To install moment-timezone for Angular in 2018:

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

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

Castiron

Answer 4

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

Bonham

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 localhost:3000/node_modules/moment(…) and not included tz will give error. please help – Moorfowl

could you please elaborate what you mean by <> – Moorfowl

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 – Moorfowl

<> was just a typo, sorry – Bonham

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. – Bonham

Let us continue this discussion in chat. – Moorfowl

@accdcjunior what needs to be done for angular 2.0 latest version. It doesnt have typings. – Revanchism

Yes this was the solution for me. – Armillas

@Bonham 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? – Gerge

@Gerge 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. – Bonham

Answer 5

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.

Turnbow

solved some part of the problem after adding your typings included but giving error Error: XHR error (404 Not Found) loading localhost:3000/node_modules/moment(…) if include import 'moment-timezone'; Please help – Moorfowl

Answer 6

This is what i use

moment(currentTime).tz(timeZone);

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

Morra