Using Ramda.js with Angular 2+ / Angular CLI

This is a quicky — hopefully to help anyone trying to work out how to integrate the functional library Ramda.js into their Angular2+ workflow. I’ve recently been learning more about functional programming in JS (as opposed to trying to use traditional OO practices with the class syntactic sugar), and so far I’m seeing the benefits of coding in a declarative style with minimal side effects / mutations! If you’re not familiar with Ramda, it’s like underscore, lodash, etc, but built from the ground-up using hardcore functional programming best practices. Here a couple of great overviews of what’s cool about Ramda:

http://fr.umio.us/why-ramda/

So, if you’re trying to add Ramda to Angular2+ (specifically with the Angular CLI, which if you’re building modern Angular projects you should be using), here are the steps:

Install Ramda.js via NPM

This is a simple npm install while inside your Angular project folder. You just need to run:

npm install ramda

I personally like using NPM aliases, so depending on whether I’m installing (i) and saving a dev dependency (-D) or live dependency (-S), I’ll use:

npm i -S ramda

Add Typescript Type Definitions for Ramda

I’m loving Typescript, it’s a huge time-saver and helps ingrain safe, robust practices while coding JS projects. To help 3rd party libraries play nice with the Typescript standards, there are ‘typings’ files that add static typing to JS. This means that Typescript can identify errors in your code before you hit run and cop a face-full of red monotype font.

To add typings for Ramda, you can install the type definitions like so:

npm i types/npm-ramda -D

You can read more about the type declarations for Ramda here: https://github.com/types/npm-ramda

Sidenote*

You can always merge the above 2 steps into one:

npm i -S @types/ramda ramda

Import Ramda into Your Angular2+ Project

Finally, to start using Ramda’s FP goodness, you just have to add the library (or a part of it) in your files where needed:

E.g. in example.service.ts, or example.component.ts

Wrap Up

And that’s it — it’s actually a pretty simple process, and you can apply the same steps to practically any 3rd party library that has typings (which you can double check at DefinitelyTyped.org: http://definitelytyped.org/)

I hope that helped anyone scratching their head trying to install Ramda in an Angular2+ project! Thanks for reading:)

Twitter: @jacobedawson

Practice Coding Interviews: https://jumpjet.io

Github: https://github.com/jacobedawson

Mashabout for Gifs (alpha / buggy): Chrome Extension