Angular 6 failed compile Property tz does not exist on type Moment

Question

When i use Moment and moment-timezone after import both, i get a compilation error where tz not exist on Moment.

The interface Moment had a timezone function who return a Moment.

I would like use the moment timezone on Moment object for a pipe

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

@Pipe({ name: 'moment' })
export class MomentPipe implements PipeTransform {
  transform(value: Date|moment.Moment, format?: string, timezone?: string): string {
    const localeMoment = moment(value);
    localeMoment.locale('fr-FR');
    return localeMoment.tz(timezone).format(format);
  }
}

{
  "dependencies": {
    "@angular/animations": "6.1.7",
    "@angular/common": "6.1.7",
    "@angular/compiler": "6.1.7",
    "@angular/core": "6.1.7",
    "@angular/forms": "6.1.7",
    "@angular/http": "6.1.7",
    "@angular/platform-browser": "6.1.7",
    "@angular/platform-browser-dynamic": "6.1.7",
    "@angular/platform-server": "6.1.7",
    "@angular/router": "6.1.7",
    "@ngrx/effects": "6.1.0",
    "@ngrx/router-store": "6.1.0",
    "@ngrx/store": "6.1.0",
    "@ngrx/store-devtools": "6.1.0",
    "@ngx-progressbar/core": "^5.2.0",
    "@ngx-progressbar/http": "^5.2.0",
    "@storever/modal-confirmation": "0.0.2",
    "@storever/ng-datatable": "0.0.2",
    "angular-l10n": "5.0.0",
    "auth0-js": "^9.4.2",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.0",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "flag-icon-css": "^2.8.0",
    "intl": "^1.2.5",
    "jquery": "^3.1.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.13",
    "ng2-validation": "^4.1.0",
    "ngx-bootstrap": "3.0.1",
    "node-sass": "^4.9.0",
    "rxjs": "6.3.2",
    "rxjs-compat": "^6.5.1",
    "rxjs-tslint": "^0.1.5",
    "typescript": "^2.9.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^6.2.1",
    "@angular/compiler-cli": "6.1.7",
    "@angular/language-service": "^6.0.0",
    "@fortawesome/fontawesome-pro": "^5.4.1",
    "@types/auth0-js": "^8.11.2",
    "@types/eonasdan-bootstrap-datetimepicker": "^4.17.23",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^3.2.11",
    "@types/moment-timezone": "^0.2.34",
    "@types/node": "^8.0.24",
    "@types/lodash": "^4.14.123",
    "clang-format": "^1.0.55",
    "codelyzer": "^4.4.4",
    "escape-string-regexp": "^1.0.5",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.3",
    "ngrx-store-freeze": "^0.2.4",
    "protractor": "^5.3.2",
    "replace-in-file": "^2.6.3",
    "rimraf": "^2.6.1",
    "ts-node": "^3.3.0",
    "tslint": "^5.11.0",
    "webpack-bundle-analyzer": "^2.13.1"
  }
}

Use my localMoment with the timezone fomated without this error.

Answer 1

This worked for me.

import moment from "moment-timezone";

Answer 2

1. install

npm install moment-timezone --save-dev

2. import

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

3. use

moment().tz('America/New_York').format();

Answer 3

Change import description like this.

import { tz } from 'moment-timezone';