Installing Moment JS with Typescript and JSPM

Installing Moment JS with Typescript and JSPM is documented on the web, but none of this actually works with the latest version of Aurelia. In this blog post I’ll show you the steps to get Moment working with Aurelia using Typescript and JSPM, and I’ll show you why it doesn’t work the way other websites say to do it. Disclaimer: Aurelia has announced that they are still doing a lot of work on their framework for TypeScript so things may magically start working once they get things sorted out and have an official v.1 release. But until that time, read on to see how to make it work today.

tl;dr;

Run the following commands to install the Moment JS library and the TypeScript definition file:

jspm install moment
typings install moment@2.10.5 --save

Now update your .ts file to import the library:

import * as Moment from 'moment';

It’s as a simple as that!

If it’s that easy, then what was the problem in the first place? The problem is that no one actually has this documented. The methods you’ll find in the blogs and in the numerous StackOverflow questions don’t work for Aurelia. They probably worked at some point in the past, but given the nature of open source libraries things often break. It was almost out of pure luck that I stumbled upon Moment having a version 2.10.5 Typescript definition file stored in the Typings Registry.

Oh yeah, your TypeScript Definition file doesn’t need to match the version of the JavaScript library you’re using. The .d.ts file is really like a C header file in that it just defines the properties and methods in a library; the implementation code is obviously in the JS files. As long as the version numbers are close and the JavaScript library you’re working with is pretty stable then you’ll be fine.

In an effort to save people time who may have tried the other methods and can’t get them to work, here is my analysis of what people recommend and why they don’t work.

typings install moment --save

The problem here is with the Typings Registry. It no longer supports the moment js library for some reason. When you run the above command, you get the error:

Unable to find "moment" ("npm") in the registry

That’s a little surprising considering that moment js is one of the most popular date based libraries available. The Typings Registry probably had it at some point in the past b/c a lot of people recommend doing this, and by the time you read this post it might be working again and this whole blog post is a moot point. But as of today it’s broken.

When you google how to fix this, what do you get? This answer:

typings install --ambient moment --save

This looks interesting. What’s with the –ambient option? The creators of the Typings Registry realized that they obviously won’t have a .d.ts file for every JS library there is. So if it can’t find it in it’s own registry then the –ambient option tells it to use the Definitely Typed library as a backup and pull the file from there.

That all sounds good, so what’s the problem with using the –ambient flag? The problem is that it corrupts your Aurelia framework modules and when you run your app you will see a dozen error messages such as this:

 error TS2305: Module ''aurelia-framework'' has no exported member 'autoinject'

No bueno. And this causes a bigger problem: If you’re using Git properly, then you have a .gitignore file which ignores the folder /typings/modules/aurelia-framework and you won’t be able to restore a copy of these files prior to being corrupted b/c they are not in version control. You have to wipe out the entire folder and rebuild it. What a mess.

From what I can tell, the people who recommend using the –ambient flag are from the Angular camp which must not have the “install me and I will irreversibly destroy your application” problem.

Moving on….. what other techniques do people recommend for using Moment JS with Aurelia? Good question.

npm install --save moment

I actually recommend using this technique in an earlier blogpost b/c it works when using WebPack (see http://www.aureliajsrocks.com/moment-js-now-typescript-compatbile/). Unfortunately, this doesn’t work with JSPM b/c the moment library isn’t added to the JSPM dependency list because it’s an NPM installation. Your code will actually pass the transpilation process with no errors, but you will get runtime errors that it can’t find the library. Cross this one off your list too!

tsd install --save moment

Using tsd to install Moment JS is a great solution for including Moment in your Aurelia app (and I was ecstatic to get it working after all the other trial-and-failures I went through). There is just one caveat though. Now you have two libraries for managing your TypeScript definition files: Typings and tsd. This adds more overhead to your app and more to manage. Nonetheless, I was happily using tsd to install Moment JS until I discovered the method I documented at the top of this page.

That’s it for the different way you can try to get Moment JS working with your Aurelia app. If you’re still reading this, I hope this post was helpful. I spent an embarrassing number of hours reading every StackOverflow question and multiple blog posts trying figure out why nothing works with Aurelia before finally getting a solution. If this post was helpful to someone then my time was not wasted.

Now it’s time for me to dig into jQuery-UI and figure out why the DatePicker doesn’t work in my app. Maybe I’ll get another blog post out of it?

Such is the life of coding on the bleeding edge with beta releases! 🙂

Update: Sure enough, I got another blog post out of installing jQuery in Aurelia and having TS definition errors crop up. Read more here: jQuery $ cssSelectorHelper error

One thought on “Installing Moment JS with Typescript and JSPM

  1. Thanks, I have just installed everything. Luckily I found this before including moment.js in project.

Comments are closed.