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'

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.