How do we replace Moment.js from our Angular Project

Moment.js has been a great library that helped to deal with Date object and adding Date helper functions (and Timezone) in javascript projects.

Since 2020 this library was deprecated. Look what the author says:

We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

What’s the big problem about moment.js? In my opinion it’s the size of it. It’s a really big library.

So the first question is: How to replace moment and have the less impact and work possible?

After researching and testing some libraries I decided to use: Day.JS

https://day.js.org/

The first question is Why do I pick Day.JS?

First of all, It has almost the same interface than Moment.js. That means a lot if you have a big project

It has a typescript interface so it’s really cool for Angular Project (or other typescript framework)

Other good thing is that it is a really small library. After adding all the needed plugins it’s size was 11.84 KB.

This library has the core functions and then you can add more functions (like plugins)

The bad thing is that the library doesn’t support treeshaking. But as you can see in the next pic it’s size is really small because the library is broken into multiple plugins so you can add what you really need.

So you don’t need to worry about treeshaking stuff.

For us it’s only a small point in the sea. Check it out:

Look how it’s really small compared to other libraries:

Compare it with Moment library:

We have checked these great articles about the most popular alternatives of Moment.js and these help us to decide

https://medium.com/swlh/best-moment-js-alternatives-5dfa6861a1eb

Check this comparison

https://github.com/you-dont-need/You-Dont-Need-Momentjs#is-before

More alternatives

https://blog.logrocket.com/more-alternatives-to-moment-js/

Comparing trends

https://www.npmtrends.com/date-fns-vs-dayjs-vs-luxon-vs-moment

Steps to Replace Moment with Day.JS

export class DateFunctions { }

The idea is to encapsulate all date functions and the library import in this new class (or service) and have this library only here

https://day.js.org/docs/en/installation/typescript

import * as dayjs from 'dayjs'

like this

import * as timezone from 'dayjs/plugin/timezone' import * as utc from 'dayjs/plugin/utc' dayjs. extend (utc) dayjs. extend (timezone)
static new (date = undefined , format = undefined ) : dayjs.Dayjs { if (date === undefined ) { return dayjs ( ) ; } if (format) { return dayjs (date, format) ; } else { return dayjs (date) ; } }

then

Replace moment() to DateFunctions.new() or moment(date) to DateFunctions.new(date)

npm uninstall moment moment-timezone --save

Other cool library is date-fns which does support treeshacking but I decided not to use it because the interface and functions are different from Moment. So it was more work to replace one from other

If you want to try to replace with date-fns check this article

https://artemdemo.com/blog/20181104-replacing-momentjs/

For another project I have also used Luxon. It seems also a really good library, the interface is almost the same as Moment. But as Day.JS it does not support treesshacking

https://github.com/moment/luxon/issues/854

Originally published at https://leandromerli.com.