Managing modules with Angular
October 09, 2017
- hey how did your hackathon go?— I Am Devloper (@iamdevloper) October 17, 2016
- not too bad, we got Babel set up
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 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?
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.
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.
- A single entry point for code reviews
- Helps coordinations between dependants modules
- Smarter setup for development
- Easier to run integrations tests if needed.
- Faster build/test time
- 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.
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?
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!