How to enable time-zone in Angular 2 application

Question

I understand this question is repeated, but the previous time does not give an answer apt the package of the moment is already installed

1. Installed package

npm set time-zone --save

Inside node_modules
|
| --moment
| --moment-time zone

directories are present

2. Index.html script included

<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 you need to import to prevent errors The tz property does not exist in the moment type

Answer 1

This can help.

angular -cli npm install.

sudo npm - -
npm install @types/moment @types/time-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.
  }

Answer 2

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

note: moment , moment-timezone.

Answer 3

, Typescript .tz(...) moment ().

, , moment-timezone typings, tz moment().

( lib, . , , angular moment, , libs, .)

, , moment-timezone 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

... :

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, . moment-timezone, momentzone.

:

import * as moment from 'moment';
import 'moment-timezone'; // since this module only has side-effects, this is enough

.

---

PS: moment moment AND moment-timezone typings ( tz) DefinitelyTyped (typings.json).

, , . , moment moment DefinitelyTyped (typings.json).

:

# 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

I had the same problem and did everything that acdcjunior suggested, but also had to set the timping for the node moment:

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

After that, he worked like a charm.

Answer 5

To set the time-zone for Angular in 2018:

1. Set moment.js and moment-timezone

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

2. Import these modules into the .ts file

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