Lodash Integration with Angular 9 Application


Lately I was still working with ng1.x applications and using Javascript librairies like Lodash and Moment. Switchin to next versions, it’s very simple for an Angular 9 application to integrate (providing the types exists) and to develop with!. I am going to explain Lodash Integration with Angular 9 here.

For Lodash, we just need to install both the lib and the types :

npm install --save lodash
npm install --save-dev @types/lodash

Just import in your component the library and use it :

import * as _ from 'lodash';

var tmpHero: Hero = _.find(heroes, (hero) => hero.id == id);
Lodash Integration with Angular 9

Now get rid of Lodash

As many of you know, native Javascript is evolving, and just like jQuery slowly became irrelevant, it’s likely that other libraries will. Reasons for that could be the pure performances or the simplicity of usage.

Speaking of performance, you might want to check that kind of test that compares native Date with Moment functions calls :Native Date Vs Moment.js · jsPerfvar timestamp = new Date(556095600000), day = timestamp.getUTCDate(), month = timestamp.getMonth() + 1, year …jsperf.com

As of Lodash, you might want to dig into the Array native methods that include powerfull stuff like the now infamous map() function that is used everyday with Observables. (sorry french link to Mozilla Dev Network … )

Related Article: Angular 9 Features

And you can replace most functions with native methods :

var tmpHero: Hero = _.find(heroes, (hero) => hero.id == id);
// becomesvar tmpHero: Hero = heroes.find((hero) => hero.id == id);

Not all situations allow to get rid of such libraries, but I think it’s worth digging into native stuff, especially for Angular apps that already come with a nice complexity.