How to Include moment-timezone in Angular 2 App

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

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.


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.