How to use moment-duration-format in an Angular2 app ?

[An0d]

Hi,

I'm struggling to use moment-duration-format in an angular2 app (with TypeScript) I installed it using "npm install moment-duration-format" I added the script in the "script" section of angular-cli.json file

but function ".format()" is not recognized on a Duration object.

I suppose I miss something, but don't know what :-/ Somebody to help ?

Thanks

[davidenke]

Same issue here. I tried adding the types with npm install @types/moment-duration-format, but without success.

[jsmreese]

Wouldn't work via npm because it's not published, but did you try using the version of this plugin that's on the 'dev' branch?

That version has proper module support. Not sure if that's the root of your issue.

On Thu, Feb 23, 2017 at 7:15 AM David Enke notifications@github.com wrote:

Same issue here. I tried adding the types https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/moment-duration-format with npm install @types/moment-duration-format, but without success.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jsmreese/moment-duration-format/issues/66#issuecomment-281976614, or mute the thread https://github.com/notifications/unsubscribe-auth/ABN2iH5cOpNNH2QIBEy1ujEeJrSmw1wiks5rfXhDgaJpZM4MAcoI .

-- John Madhavan-Reese Support Team Lead You.i TV john.madhavan-reese@youi.tv

[ghybs]

Hi,

As for many other modules, you can get it working in 2 steps:

1. Load the functionality into the app, as a JavaScript plugin only.
2. Load typings separately and declare them to TypeScript, so that your compiler and/or IDE is/are happy.

Detailed steps:

1. Load the JavaScript part:

   1. Get the plugin npm module:

      $ npm install --save moment-duration-format

   2. Import it into your app, e.g. at the top of your main module, so that it is loaded and patches the global or requirable moment object:

      import 'moment-duration-format';

2. Load the typings separately:

   1. Get the plugin typings (GitHub repo):

      $ npm install --save @types/moment-duration-format

   2. Declare them to TypeScript:

      1. In your project tsconfig.json file, add them to compilerOptions.types:

         {
         "compilerOptions": {
         "types": [
           "@types/moment-duration-format"
         ]
         }
         }

      2. Or add their reference in a *.d.ts file:

         /// <reference types="@types/moment-duration-format" />

Hope this helps.

[ssougnez]

It still does not work for me. Here is what I did:

package.json:

{
  "devDependencies": {
    "@types/moment-duration-format": "^1.3.7"
  },
  "dependencies": {
    "moment": "^2.18.1",
    "moment-duration-format": "^1.3.0"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "typeRoots": [ "./node_modules/@types" ]
  }
}

In my angular2 component:

import * as moment from "moment";
import * as momentDurationFormat from "moment-duration-format";

...

let result: string = moment.duration(this.selectedHangarDistance * 10, "minutes").format("h [" + this.translatePipe.transform("COMMON::HOURS_SEPARATOR") + "] mm [" + this.translatePipe.transform("COMMON::MINUTES_SEPARATOR") + "] ")

I also tried with

import "moment-duration-format";

But it does not change anything. Adding a reference with the triple slashes is not really a solution. At the end of the day, webpack is always complaining:

ERROR in [at-loader] ./src/app/components/building/shop/shop.component.ts:190:81 TS2339: Property 'format' does not exist on type 'Duration'.

[gummibjorn]

@ssougnez i'm doing this as a workaround:

(<any>moment.duration(value, 'minutes')).format('d [days] h [hours] m [min]');

[nlemsieh]

Add an interface that extends moment.Duration with format() function :

export interface IDuration extends moment.Duration {
  format(template:string): string;
}

then:

const duration = <IDuration>moment.duration(value, "minutes").format("h:mm");

[Polyterative]

Same here. I think the typing is not in the correct form.

[LoganDupont]

@jsmreese any update on this?

[Vermorxt]

What works for me is to load the module with require instead of import:

declare var require: any; const moment = require('moment'); const momentDurationFormat = require('moment-duration-format');

[juliofalbo]

I have the same issue. @jsmreese any news?

[TianyiShi2001]

I am getting the same issue.

[pfalomorblab]

me too

[dsanner]

What works for me is to load the module with require instead of import:

declare var require: any; const moment = require('moment'); const momentDurationFormat = require('moment-duration-format');

this worked for me as well. Thank you.