[Solved] How to get momentJS into a ionic2 TS project without errors?

Ionic Framework ionic-v3
1

I have installed moment and its typings into my ionic2 project:

typings install moment --ambient --save

In my page, I use the following to import syntax:

import * as moment from 'moment';

With this import syntax (as opposed to others) the moment functionality is working. However, Visual Code intellisense says it “cannot find ‘moment’” and when doing an ionic serve get the following errors:

ERROR in [default] C:/Users/Mark/Documents/App Development/MyApp/app/pages/
login/login.ts:4:24
Cannot find module 'moment'.

and

ERROR in [default] typings/browser/ambient/moment/index.d.ts:9:20
Cannot find namespace 'moment'.

If anyone has been able to get momentJS actually working (not just notionally following the procedures of other 3rd party package installs) in their TS ionic2 project without any intellisense or other associated errors can you please provide all the steps required (including their TSConfig.json set-up)?

Thanks in advance!

2

No personal experience, but here’s what a quick research lead me to:

3

There shouldn’t be any need to install it as ambient. moment has typings in the registry.

$ npm install --save moment
$ typings install --save moment

in tsconfig.json:

"files": [
    "typings/main.d.ts",
   ...
]

when needed:

import * as moment from 'moment';
export class Foo {
  bar(instant:moment.Moment):void {
   // do things
  }
}
4

Thanks! Removing my ‘ambient’ typings installation of moment and doing the install as you suggested fixed the intellisense and the TS errors I was getting during ionic serve.

I have the following code

moment(this.my.birthdateYear,"YYYY").isLeapYear())

where this.my.birthdateYear is a string value input from the user, which worked in ionic1 JS (except was using $scope instead of this). Now get the following error after serve:

Argument of type 'string' is not assignable to parameter of type 'Moment'.

How to fix?

Thanks once again! :slight_smile:

5

I don’t see any errors with similar code. You seem to have an extra closing parenthesis at the end of that expression, so is there any chance that there’s some sort of unintended weird parenthesis grouping that’s causing your problem?

6

Apologies - I cut that example out of conditional code and accidentally kept the ending parenthesis. In any case that was not the moment call that was causing the error! It was

moment().diff(birthDate, 'years')

where birthdate is a string. As per the momentJS docs, a string value is permitted for the first parameter, and is what I had working in normal javascript. It looks like the Type Definition for the diff method is not complete/correct.

Thus in accordance with the error I was receiving I needed to do this:

let birthDateMoment=moment(birthDate);
let Age = moment().diff(birthDateMoment, 'years');

So all is working now.

In summary - when installing momentJS or some other 3rd party packages, using an ambient typings install as suggested in places such as

is not always the appropriate type of install to perform depending on the package. And don’t always trust that the Typescript Definitions are complete/correct!

Thanks for your input. :slight_smile:

7

I can get momentJS into my ionic 2 APP with this command:

npm install --save moment

Then, when I need to use it:

import * as moment from 'moment';
3 Likes
8

You don’t need to install any typings, they’re included with moment since 2.13.0: http://momentjs.com/docs/#/use-it/typescript/

9

Yes. It’s true. I’ve already edited my answer.

Thanks.