&w=3840&q=80)
Happy 2020, everyone! To kick the year off the right way, we’ve prepared an overview of our team’s favorite Angular blog posts from last month - let’s dive right in!
How to create an icon library in Angular
We begin our list for December with a post by Kevin Kreuzer of Angular in Depth taking the reader through the steps needed to create an icon library for an Angular application. He begins with a comparison between SVG and IconFont, then goes on to explain how to set up the icon library.
An important thing that Kevin highlights is that having a library with a large amount of icons, even when not all are used, can greatly affect the resulting app’s performance. To tackle this, he proposes making the library “tree shakable” - you only register those icons that you use, which then significantly reduces the size of the bundle.
Scully: We Finally Have an Angular Static Site Generator
The next post announces an important new project in the Angular ecosystem - the first-ever Angular static site generator, which finally catches up to the most popular front-end framework React with its Gatsby SSG.
Scully, developed by the HeroDevs team, is now just a month old and is currently still in alpha, but it’s already gaining traction in the community, with the team presenting several demo showcases and people already building projects with it.
The author of the post, Matthew Williams, also outlines some advantages of using Scully: number one is definitely the improved performance, but others also include the optimized developer experience and the ability to create a blog site with the ease of creating a simple component.
Angular 9.0.0 and Ivy improvements
Third on our list is a post written by Mike Hartington of Ionic which details the improvements of the upcoming 9.0.0 release of Angular. This version will come with the new renderer Ivy enabled by default, one of the major benefits of which being different rendering, making your app smaller and thus better performant.
Another major improvement is the doing away with entryComponents, also thanks to Ivy. Besides updates to the framework itself, Angular 9.0.0 will also introduce some improvements to its CLI: when served, apps will be automatically built with the AOT compiler; additionally, the way differential builds are performed is also changed in a way that speeds up build time.
10 Useful Angular Features You’ve Probably Never Used
The next blog post that caught our attention was Chidume Nnamdi’s list of 10 Angular features developers may have missed, but that will certainly enhance the developer experience of those using them.
The features he enumerates are as follows: the Title and Meta elements; overriding Template interpolation; the Location service; the DOCUMENT token; the @Attribute decorator; HttpInterceptor; AppInitializer; the Bootstrap Listener; and the NgPlural directive.
Chidume finishes his post with a call to action for readers to list their favorite rarely used Angular features - so, if any come to mind, make sure to contact him and let him know!
Building an Angular Jamstack App with Scully
We already covered a blog post announcing the new Angular SSG Scully. This next one, then, written by Tara Z. Manicsic of Netlify, is a tutorial detailing how to use Scully to build a JAMstack application.
The main appeal of Scully is that it pre-renders the Angular app into lighter HTML files, relinquishing the need for heavier JavaScript - in Tara’s example, the resulting app’s size is reduced from 9.3MB to as little as 7.9KB!
Going meta, Tara’s blog post also describes how to create a blog post with Scully (namely, by running ng g @scullyio/blog, which will then create a markdown file), and concludes with how to deploy the resulting application on Netlify.
Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'
Moving on, we have a blog post by Chris Kohler in which he takes a detailed look at the two new providedIn scopes that will come with Angular 9: ‘in’ and ‘platform’. In short, these are new ways to define where a service should be resolved - ‘platform’ makes it available between multiple apps or elements, and ‘any’ creates isolated services for each child injector.
This is the biggest change to service providers since Angular 6 introduced providedIn: ‘root’, which made the services tree-shakable. The most likely use case of ‘platform’ is for sharing services over application boundaries, while ‘any’ ensures that the service is a singleton within module boundaries.
Angular 9 Update Guide
Another great post from December is Brian Love’s detailed Angular 9 update guide. It includes a breakdown of everything you need before you begin the update (including upgrading to the latest stable version of Angular 8), as well as a disclaimer of what to be mindful of when updating through the CLI and after you run the update.
Namely, after you successfully update to version 9, you need to migrate to TestBed.inject<T>() from the deprecated TestBed.get(), as well as remove the no longer necessary entryComponents array from your app’s @NgModule decorators. For those using the i18n framework, there are some extra things you need to take care of - check out Brian's whole post for more.
You Should Upgrade to Angular 9 TODAY
We’re topping off this month’s list with a post by Aaron Frost of HeroDevs (the team behind Scully, if you happened to forget) making a strong case for upgrading to Angular 9 as soon as possible.
Indeed, the arguments for upgrading to version 9 are quite compelling: not only will users get support from Google, Angular 9 is also the most thoroughly tested version of the framework due to the numerous projects Google is working on.
In short, this version of Angular is groundbreaking in its lack of features rather than new functionality, with the goal of securing stability across all Angular apps.
Right, that’s it for our recap of December’s Angular posts. We’ll be making an overview of our favorites next month, too, so make sure to check back then!
