{"componentChunkName":"component---src-templates-blog-post-js","path":"/managing-modules-with-angular/","result":{"data":{"site":{"siteMetadata":{"title":"Fabrizio Fortunato","author":"Fabrizio Fortunato","siteUrl":"https://izifortune.com"}},"markdownRemark":{"id":"dc2e4d1f-6eae-5e41-873b-16fd3f9f7383","excerpt":"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…","html":"<p>Creating an app now days it’s quite easy compared to last year where what was called the <em>javascript fatigue</em> was taking up days of setup without giving us something useful.</p>\n<div style=\"margin-bottom: 24px; display: flex; justify-content: center\">\n<blockquote class=\"twitter-tweet\" style=\"margin: 0 auto\" data-lang=\"en\"><p lang=\"en\" dir=\"ltr\">- hey how did your hackathon go?<br>- not too bad, we got Babel set up<br>- yep…<br>- yep.</p>&mdash; I Am Devloper (@iamdevloper) <a href=\"https://twitter.com/iamdevloper/status/787969734918668289?ref_src=twsrc%5Etfw\">October 17, 2016</a></blockquote>\n<script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n</div>\n<p>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 <a href=\"https://cli.angular.io/\">angular-cli</a> shines when you want to create a full application.</p>\n<p><em>angular-cli</em> 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.</p>\n<h3>Modules</h3>\n<p>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 <strong><em>@NgModule</em></strong> to define one but <em>angular-cli</em> still doesn’t support a <em>module</em> template.</p>\n<p>Recently Stephen Fluin posted an interesting <a href=\"https://blog.angular.io/the-past-present-and-future-of-the-angular-cli-13cf55e455f8\">article</a> 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: <em>Library support</em>, this means that the angular-cli team actually realise this lacking and they are working on it.</p>\n<p>What if you need a solution right now for creating a library?</p>\n<h3>generator-angular2-library</h3>\n<p>In this case, you can use <a href=\"https://github.com/jvandemo/generator-angular2-library\">generator-angular2-library</a> yeoman generator.\nThe generator creates a module bundle following the official <a href=\"https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview\">angular package format</a>. It will inline templates, inline styles and also AOT support.</p>\n<p>To get started you just need to install it:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ <span class=\"token function\">npm</span> i -g yo generator-angular2-library</code></pre></div>\n<p>and then run the generator:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ <span class=\"token function\">mkdir</span> library-name\n$ <span class=\"token builtin class-name\">cd</span> library-name\n$ yo angular2-library</code></pre></div>\n<p>The generator will ask you a set of questions to customise your library.</p>\n<p>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.</p>\n<h3>Monorepo vs Multirepo</h3>\n<p>We are now entering in the “danger zone” of an eternal battle: <strong><em>multirepo vs monorepo</em></strong>.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 35.810810810810814%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAAB9ElEQVQoz2P4GmrO8MHfqP5DgMnx9966s967a078EGhy83Og8X+g+Pa3EcYcDGjgsoEIE7rYcwYGFjDjQ4Cx2/9Qs/8/A4z+/0/z+v8/J/D/F1/9/18CTf6/DzD+9dXZWGrZ/wKO3X1GMse6tcx6S+XkQPqeSjBwf0xw2/opO3j2O2sprY9pPpc/pngXgAx0Brro33tP7T+fi2N+fe2t+gV06a/fQEveBxhtAmm+FCGZvrdW8fmhCun/u1IkL9YxMIj98lJU+RTn/P9zady99y6qZf/zQ/4DDd8BMlAI6LUvn4JM/7/30PoHdNW/bwsn/f4baf3/vadOOMjAOwJsM2478f/fa8n7e7+z4P9NDExxIPH3UQ6R73313UDsj1H2Ve/MRCVABvb/CAYa5qXz+1NOyJ8vjTl/PoSY//4RYv7/vb/R4f/nW5iWMDAI7mJgsDnGwOC8lIHB1ImBgeO9rbTcxzjnR58KIo8AXRgL9PKPTxn+8xi+BZn8/w408JOP3v/fmX7//5bH///kqf3/IzAMQWH73s/IjgELeGskKPYx1unmp9zQ3e+dlD0+Jnt++Zjm2w9yYSvQy++A9EegK0+/d9PYCwzT90CxP0C87kOgMRfIgHOy/MyneJiY1nIzMF2x0wTH8sckD753NjLcUC9LgmgATlPseaX3hlIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"mono v multi\"\n        title=\"mono v multi\"\n        src=\"/dist/static/27f1465e0ec569ff853f3f236edde598/102e5/mono-v-multi.png\"\n        srcset=\"/dist/static/27f1465e0ec569ff853f3f236edde598/83276/mono-v-multi.png 148w,\n/dist/static/27f1465e0ec569ff853f3f236edde598/ba02f/mono-v-multi.png 295w,\n/dist/static/27f1465e0ec569ff853f3f236edde598/102e5/mono-v-multi.png 590w,\n/dist/static/27f1465e0ec569ff853f3f236edde598/71afd/mono-v-multi.png 691w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>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.</p>\n<p>Monorepo:</p>\n<ul>\n<li>A single entry point for code reviews</li>\n<li>Helps coordinations between dependants modules</li>\n<li>Smarter setup for development </li>\n<li>Easier to run integrations tests if needed.</li>\n</ul>\n<p>Multirepo:</p>\n<ul>\n<li>Faster build/test time</li>\n<li>Easier </li>\n<li>Clear ownership</li>\n</ul>\n<p>If you have decoupled modules that don’t require each other or are dependent on a <em>core</em> module, a multirepo may suit you better. You can use <em>generator-angular2-library</em> to get started.</p>\n<p>On the other hand if any of the above doesn’t apply a monorepo will probably suits you. That’s why projects like <a href=\"https://github.com/babel/babel\">babel</a> or <a href=\"https://github.com/ngrx/platform\">ngrx</a> have chosen to have a single repository with <em>multiple packages</em> inside.</p>\n<h3>Monorepo - Multiple packages</h3>\n<p>A multiple package repository it’s a single repository that holds different npm packages.</p>\n<p>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 <a href=\"https://github.com/lerna/lerna\">lerna</a>.</p>\n<p>It focuses on two main commands <code class=\"language-text\">lerna bootstrap</code> which will link all dependencies in the repository together, <code class=\"language-text\">lerna publish</code> which helps publishing the updated packages.</p>\n<p>If you are not familiar with it please have a look at <a href=\"https://github.com/szarouski/lerna-wizard\">lerna-wizard</a> a cli tutorial that will show you all the basics to get started using lerna.</p>\n<h3>Where do i start?</h3>\n<p>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 <a href=\"https://github.com/Ryanair/angular-multimodule-cli\">angular-multimodule-cli</a>.</p>\n<p>This cli it’s based upon the build system that <em>ngrx</em> has in place, a big thanks its in order. To get started simply:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ <span class=\"token function\">npm</span> i -g angular-multimodule-cli</code></pre></div>\n<p>Now you can run it:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ ng-multi new my-project</code></pre></div>\n<p>And you are ready to go, no more time needed wasted on setting up the whole repository yourself.</p>\n<p>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.</p>\n<p>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 <a href=\"https://hacktoberfest.digitalocean.com/\">Hacktoberfest</a> from <em>DigitalOcean</em>, 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.</p>\n<p>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!</p>","frontmatter":{"title":"Managing modules with Angular","date":"October 09, 2017","description":"How to manage Angular modules and libraries and what are the tools that we can use to help us maintaining our modules.","socialImage":{"childImageSharp":{"fixed":{"src":"/dist/static/35782d8ca91263cf4f7bed3d3ee12ef3/048fd/background.png"}}},"image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABFElEQVQY02PQLT+OjPTKjmlUndauPOmTvLbVsqrCptY5bYNm1WmtqlNAKTTFDGg61avPhMQu2yoddIfJ5AmT8hlm5f3MJvPkQtxS1mlUn0HTj6JZv/SoUt2FAu++Nwyqd9j0rsy0O9VpcohB8zyDakTobJW6C0AFuDWXHVOrPRsatfQeh8H56YoXr5jduBtyrsdgD7uxW/I6jRq8NoM8XH3aJW3LbS6j89OULlw1vnE/4HynwVZeS+ucXZjeRtesVXnSrGDfJW6bFwwql6dYnWwxPscgs0HYVQc1qLBoBukvP6ZdcTImcv4uscDHDGonGdTmSYf5xy7RqiQU2nCkVH9Rq+pkiUtnukefeu1ZYFBh6gQiALEH294NZe1XAAAAAElFTkSuQmCC","aspectRatio":2.5692307692307694,"src":"/dist/static/6bd979b48c08019f402ff88160e7e85e/a5924/background2.png","srcSet":"/dist/static/6bd979b48c08019f402ff88160e7e85e/17cc0/background2.png 167w,\n/dist/static/6bd979b48c08019f402ff88160e7e85e/f7869/background2.png 333w,\n/dist/static/6bd979b48c08019f402ff88160e7e85e/a5924/background2.png 666w","sizes":"(max-width: 666px) 100vw, 666px"}}}}}},"pageContext":{"slug":"/managing-modules-with-angular/","previous":{"fields":{"slug":"/unit-testing-angular-applications-with-jest/"},"frontmatter":{"title":"Unit testing Angular applications with Jest"}},"next":{"fields":{"slug":"/multiple-packages-repository-with-angular/"},"frontmatter":{"title":"Multiple packages repository with Angular"}}}}}