Top Angular blog posts from February 2020
February was a huge month for Angular, with the release of the groundbreaking version 9 shipped with the new Ivy renderer. Taking this into account, it’s no surprise that our recap of the top Angular posts from February is, shall we say, ivy-colored and lazy-focused. Let’s get started!
Version 9 of Angular Now Available — Project Ivy has arrived!
It makes the most sense to begin our recap with the announcement of the eagerly awaited release of Angular 9, written by Stephen Fluin. With important updates to the CLI, and especially with the already mentioned Ivy renderer, this is one of the biggest updates to the framework.
Stephen begins the post with instructions on updating to version 9, then goes on to list all the improvements that Ivy brings to the table (smaller bundle sizes, faster testing, improved debugging, in addition to numerous other improvements).
Finally, he also lists the non-Ivy improvements of Angular 9, such as a more reliable ng update and TypeScript 3.7 support, before concluding the post by thanking everyone who helped make this version.
How to use ResizeObserver with Angular
Next up, this post by Chris Kohler detailing how to use the ResizeObserver API in Angular. The API essentially allows you to react to the resizing of elements.
He first explains why we even need to use the API when there’s a solution already available (window.onchange) by showing some challenges with the existing solution, and then he gives a general overview of ResizeObserver.
The last part of his post then takes a look at how to work with it in Angular, with the 2 crucial elements here being triggering change detection and unobserving on destroy. For those who want an event simpler way of using it in Angular, Chris has created a library for exactly this purpose - ng-resize-observer.
How to architect epic Angular app in less than 10 minutes!
Moving on, we have a post by Tomas Trajan in which he shows how to build a highly performant Angular application quickly and efficiently by using the latest tools and following best practices.
Tomas’s approach is largely focused on achieving very clean architecture of the resulting Angular application. The app consists of 2 parts: the eager part which is loaded immediately, and the lazy part accessed through user interaction.
Such an approach achieves a great balance between the bundle size and the developer experience, by using SharedModule for lazy loaded feature modules together with following the architecture outlined by Tomas.
Quick Guide to Angular Schematics: How I Built My First Schematic
The previous blog post made great use of Schematics for building the core of the respective application. In this one, then, we learn from Stefanie Fluin how to actually create an Angular Schematic.
She begins with a brief description of Schematics (i.e. they are used for modifying existing Angular projects, by adding files and/or libraries), then walks the reader through setting up template files and the logic.
Of course, it’s wise to also test your Schematic locally on an actual project. The last thing you then need to do is to add ng add support before deploying the package to NPM to make it accessible to the public.
Debugging Angular 9
This is actually a two-part series of blog posts written by Microsoft’s John Papa on debugging Angular 9 apps. The first post in the series is a more general, quick overview of Ivy runtime debugging with new methods such as ng.ApplyChanges and ng.GetComponent using Chrome developer tools.
The second part is more specific and deals with interacting with components, namely, modifying a parent by modifying its child component. This is all done in the developer tools; by applying change detection (with ng.ApplyChanges), you can then see the updates happen right in the browser.
Welcome to the Ivy League: Lazy Loading Components in Angular v9
The next post we’d like to showcase is dedicated to an awesome new feature that’s enabled in Angular 9 thanks to Ivy: the lazy loading of components. In it, Netanel Basal shows several neat things you can do when lazily loading components in order to optimize the performance of your Angular application.
The first step is to create a FooComponent and enable it to be lazily loaded. The next part shows how to work with Inputs and Outputs using that same FooComponent and a BarComponent.
Netanel also includes two useful Webpack comments, then finishes with a more specific use case: lazy loading only widgets existing in the client’s dashboard out of a wider selection of available ones.
Angular 9: What’s New?
We mentioned in the introduction that this month’s post would unavoidably be focused around the latest release of Angular. So, approaching the end of this month’s list, we have a post by Kapehe Jorgenson and John Papa, published on the Auth0 blog, serving as an overview of the top new improvements coming with Angular 9.
Among these are: smaller bundle sizes; faster build times; the addition of the AOT (Ahead-of-time) compiler to the dev build; improved ng update; and the doing away with the need to specify entryComponents. Besides the specific features, they also point out the upgraded tooling of version 9, then finish with authenticating an Angular app and a Node API with Auth0.
A detailed look at Angular's 'root' and 'any' provider scopes
Concluding our list for February, we have a post by Santosh Yadav discussing Angular Provider Scopes and comparing the standard ‘root’ to the new ‘any’ introduced with Ivy.
Santosh explains that, with a lazy loaded module, using providedIn: ‘root’ does not produce a new instance of the module. This is because ConfigService is registered with the App Module rather than any of the lazy modules, and hence their routes cannot be activated due to a lack of respective config values.
The solution is for each lazy loaded module to have its own instance of ConfigService, and with providedIn: ‘any’ introduced in Angular 9 ensuring this is now greatly facilitated.
This is it for our overview of February’s top Angular blog posts. Tune in next month when we’ll be doing a similar recap for March. Until then - stay healthy, everyone, and remember to wash your hands! :)
