Fabrizio Fortunato

Managing modules with Angular

October 09, 2017

Creating an app now days it’s quite easy compared to last year where what was called the javascript fatigue was taking up days of setup without giving us something useful.

This is mainly thanks to all the work that the community put into the various cli to bootstrap your projects. Especially in the Angular world angular-cli shines when you want to create a full application.

angular-cli has everything setup out of the box including scss support, AOT, service worker and more. Recently it added the support for a minimal flag which inline styles and templates.

Modules

Modules are not applications, modules are independent units that can be used inside your applications. Modules will be used only inside other applications. Angular provides the decorator @NgModule to define one but angular-cli still doesn’t support a module template.

Recently Stephen Fluin posted an interesting article on the angular blog, it’s a good analysis of what the cli did, is doing and will do. I was really impressed by one of the points about the future: Library support, this means that the angular-cli team actually realise this lacking and they are working on it.

What if you need a solution right now for creating a library?

generator-angular2-library

In this case, you can use generator-angular2-library yeoman generator. The generator creates a module bundle following the official angular package format. It will inline templates, inline styles and also AOT support.

To get started you just need to install it:

$ npm i -g yo generator-angular2-library

and then run the generator:

$ mkdir library-name
$ cd library-name
$ yo angular2-library

The generator will ask you a set of questions to customise your library.

It works well when you have decoupled modules and you are willing to manage them into different repositories. Not always this is the best choice.

Monorepo vs Multirepo

We are now entering in the “danger zone” of an eternal battle: multirepo vs monorepo.

mono v multi

Everyone has a different opinion of what is the best approach. Here i want to list out some of the pros of each approach and tell, in my opinion, when to use one or the other.

Monorepo:

  • A single entry point for code reviews
  • Helps coordinations between dependants modules
  • Smarter setup for development
  • Easier to run integrations tests if needed.

Multirepo:

  • Faster build/test time
  • Easier
  • Clear ownership

If you have decoupled modules that don’t require each other or are dependent on a core module, a multirepo may suit you better. You can use generator-angular2-library to get started.

On the other hand if any of the above doesn’t apply a monorepo will probably suits you. That’s why projects like babel or ngrx have chosen to have a single repository with multiple packages inside.

Monorepo - Multiple packages

A multiple package repository it’s a single repository that holds different npm packages.

Building a monorepo doesn’t mean that we will have only one npm package built, in fact we can manage multiple packages thanks to tools like lerna.

It focuses on two main commands lerna bootstrap which will link all dependencies in the repository together, lerna publish which helps publishing the updated packages.

If you are not familiar with it please have a look at lerna-wizard a cli tutorial that will show you all the basics to get started using lerna.

Where do i start?

We got our set of tools now but we are back again in the javascript fatigue, there’s nothing official that help us bootstrapping a new project with multiple packages. That’s why in Ryanair we released angular-multimodule-cli.

This cli it’s based upon the build system that ngrx has in place, a big thanks its in order. To get started simply:

$ npm i -g angular-multimodule-cli

Now you can run it:

$ ng-multi new my-project

And you are ready to go, no more time needed wasted on setting up the whole repository yourself.

It also includes out of the box additional tools to help you maintain multiple modules, you can read more about it directly in the repository.

We created the generator and start using internally and now in October we decided to open source it. Why October? You might have heard of Hacktoberfest from DigitalOcean, simply put once you register if during October you manage to make four pull requests on any open source projects you will earn a free t-shirt.

This is a way, for us in Ryanair, to contribute to all the open source community with the hope that it might help you building amazing Angular modules, and if you want to improve it or have a suggestion that’s the best time of the year!


Head of Frontend at RyanairLabs @izifortune
Fabrizio Fortunato © 2021, Built with Gatsby