Top 15 Angular inDepth articles of 2019

2019 has come to an end. Here at Angular inDepth, we're happy to have offered you another year of high quality, in-depth articles on Angular and related topics.

This was also the year when the first inDepth conference was held. 7 of your favourite speakers delivered in-depth talks throughout a 2-track day of talks and workshops in Kiev, Ukraine. Videos are available on the inDepth conference YouTube channel.

Looking back at the year that has gone by, we have collected the 15 articles that have caught your attention the most.

The list have a few topics in common. 2019 was the year in which you Angular inDepth readers were most excited about:

• Angular version 8, Angular version 9, and Angular Ivy
• RxJS
• Angular Components (Angular CDK, Angular Material, and components for Google products)
• Dynamic loading and rendering

Let's go through the list and see whether you managed to miss any of them or you want to revisit a favourite article.

#15: Building an extensible Dynamic Pluggable Enterprise Application with Angular

By Alexey Zuev

A use case in high demand from the Angular community is the option to compose Angular components based on a runtime configuration. The Angular team has opted out of offering an official solution. Instead, it's up to us to implement this using Angular's building blocks and extension options.

Alexey introduces an Angular View Engine-compatible solution that is AOT-compiled, shares common dependencies between Angular plugin modules without increasing the bundle sizes and has server-side rendering support. One of the techniques used is a custom Angular CLI builder.

#14: Asynchronous Modules and Components in Angular Ivy

By Artur Androsovych

Artur explores different techniques for dynamic, lazy module loading and dynamic component rendering using Ivy and Angular CDK Portal. He starts out by using experimental Ivy APIs but ends up using stable Ivy APIs only.

The result is a recipe we can use as a starting point for lazy-loading components or entire features without relying on routes or the lazyModules CLI workspace option.

#13: How to RxJS in Angular

By Matthias Meier

Combinations of RxJS and Angular are explored through simple examples in this interesting article by Matthias. These techniques and use cases are covered:

• Observable input properties
• Observable DOM events
• Cancelling in-flight HTTP requests
• Letting Angular manage subscriptions using the AsyncPipe
• Preventing duplicate HTTP requests when multiple subscriptions occur
• Avoiding memory leaks when managing multiple subscriptions

#12: Tooltip with Angular CDK

By Nikita Poltoratsky

Based on his experience with building a UI component library using Angular CDK, Nikita walks us through the development of a tooltip directive.

We learn how to use:

• Host listeners
• CDK Overlay
• CDK Portal
• Relative element positioning

#11: Google Maps is now an Angular component

By Tim Deschryver

Google has started publishing official Angular components for Google products as part of the Angular Components project. The first one was the YouTube player in Angular version 8.2. The second official Google product component is a wrapper for the Google Maps JavaScript API which Tim covers in this article.

We learn about methods, input properties and output properties of:

• The GoogleMap component
• The MapMarker component
• The MapInfoWindow component

The Angular Google Maps package is scheduled to be released with Angular version 9.

#10: RxJS in Angular: When To Subscribe? (Rarely)

By Michael Lorton

Imperative management of subscriptions is tedious and error prone. In this article, Michael explores when it is and isn't absolutely necessary to subscribe manually in Angular components and services.

#9: Angular Revisited: Tree-shakable components and optional NgModules

By Lars Gyrup Brink Nielsen

In the precursor article to Lars' conference talk of the same name, he explores how changes to Angular's dependency injection APIs and the upcoming Ivy runtime will to a certain degree make Angular modules optional by using experimental APIs.

We are introduced to the concepts of tree-shakable components and SCAMs. Tree-shakable components are a wish list of useful properties for components that could eventually be enabled by Ivy at some point.

SCAMs (Single Component Angular Modules) are a safe migration path towards tree-shakable components which also come with other benefits.

In the article, the transitive module scope is also explained to get an understanding of how declarable dependencies are linked by Angular.

#8: How to Start Flying with Angular and NgRx

By Andrew Evans

Goose Weather is an open source North American weather app named after Andrew's wife who aspired to be a meteorologist when growing up.

Andrew walks us through the basic concepts of NgRx–store, reducers, actions, selectors and effects–by guiding us through cloning and running Goose Weather locally and implementing simple use cases.

We are guided through the whole process in a step-by-step manner. Perfect to get our feet wet with NgRx for the first time.

#7: Connecting the dots: where hard work and dreams can lead you

By Max Koretskyi

In only a few years, Max has boosted his career by leveling up his skills through answering questions on Stack Overflow, writing and presenting tech talks about Angular. This has earned him the title of Google Developer Expert in Angular and Microsoft Most Valuable Professional.

This is quite a dramatic turn of events since a couple of years ago, Max was ready to leave behind the tech industry as he struggled to find his passion. Max ended up finding his niche in Angular. Being a new framework, only very few writers were covering topics beyond the basics.

Max ended up discovering and getting a dream job as a developer advocate for ag-Grid. Most importantly, as Max experienced several obstacles on his path toward success, he never stopped but instead kept pushing through, working insane 90 hour work weeks between his regular job and personal growth efforts and projects.

Lean back and enjoy the motivational story of how Max Koretskyi became a leading expert in the Angular community.

#6: Brace yourself. Angular 8 is coming

By Santosh Yadav & Roman Yavoriv

Shortly before the release of Angular version 8, Santosh and Roman joined forces to take a look at new and exciting feature of Angular version 8.

Features covered:

• Differential loading
• SVG templates
• Opt-in Ivy preview
• Opt-in Bazel preview
• Angular CLI builders
• Native dynamics import statements for lazy loading
• Support for the $location service when upgrading an AngularJS application
• Web worker support for offloading processing-intensive tasks to a separate thread
• Service worker improvements
• Reactive forms improvements
• TypeScript 3.4 support
• Server-side rendering performance improvements
• AngularFire 2 deployment builder
• Deprecated APIs
• Breaking changes, most notably the required static option for component queries

#5: Optimize Angular bundle size in 4 steps

By Siyang "Kern" Zhao

4 easy-to-follow steps to optimise page load times of our applications:

1. Determine our bundle sizes
2. Make sure our bundles are served with Gzip compression
3. Analyze our biggest bundles
4. Set budgets for bundle sizes

Siyang wraps up his best tips by recommending lazy-loading of bundles as the next step in optimizing our application performance.

#4: Introducing NG-VDOM: A new way to write Angular application

By "Trotyl" Yu

Our in-house Chinese Angular Collaborator known as "Trotyl" Yu blends two worlds together with NG-VDOM, a library that enables Angular applications to use TSX, functional components and class components similar to Angular's framework cousins React and Vue.

In the article, Trotyl explains how a virtual DOM is modelled. We are also taught how Angular expose differs for objects and collections and how they are used by NG-VDOM to manage change detection when using the virtual DOM.

The library is a work-in-progress. It has limited functionality, but with a lot more features planned for the future.

When is a virtual DOM useful in Angular projects? Besides familiarity for React and Vue developers, Trotyl argues that for very dynamic and complex UIs, NG-VDOM can result in a smaller footprint compared to regular compiled Angular templates.

#3: Top 10 ways to use Interceptors in Angular

By Michael Karén

Michael shares his 10 best HTTP interceptor use cases based on his own experience and recommendations from the Angular inDepth expert panel.

The beginning of the article introduces the concept of HTTP interceptors. The use cases that follows include URL manipulation, adding spinners, response conversion and mapping, adding an X-Man HTTP header for the infamous Wolverine (or perhaps more relevantly XSRF tokens).

We will leave it as a surprise for you to discover the remaining, most useful HTTP interceptors by reading the full article.

#2: All you need to know about Ivy, The new Angular engine!

By Eliran Eliassy

Everyone is excited about the yet-to-be-released Ivy renderer, compiler and runtime for Angular. It has been available for a couple of years behind feature flags. Angular version 8 was released with an "opt-in preview" of Ivy.

In this article, Eliran explores some of the potential for future design patterns that Ivy unlocks or enables with some additional work.

One of the promises of Ivy i smaller bundle sizes. Eliran's own website is used as a case study and demonstrates a 15% decrease in bundle size when switching from View Engine to Ivy compilation.

To explain how the bundle size can be seemingly magically reduced by a significant amount, Eliran compiles a simple component with both the View Engine and Ivy compilers. He explains the differences and leads us to the conclusion that most Ivy runtime parts are tree-shakable.

We're shown another Ivy benefit–how error messages for component templates are more useful.

Dynamic import statements are now available both to the View Engine and Ivy-based applications as a way to lazy load Angular modules and in fact arbitrary EMCAScript modules.

Eliran dynamically lazy loads an Angular feature module. He then introduces an experimental Ivy function that allows us to bootstrap components without Angular modules.

This leads to the question: Do we still need Angular modules? Like discussed in article #9 in this list, some of the Angular module concerns can be expressed without Angular modules. With the introduction of Ivy, the Angular team is experimenting with the idea of eventually making Angular modules optional.

In the final part of his article, Eliran introduces the concept of higher-order components by using a custom class decorator to add metadata about an Angular module-free component as well as adding a custom lifecycle hook.

#1: The Best Way To Unsubscribe RxJS Observables In The Angular Applications!

By Tomas "Trajan"

Without further ado, let's jump right into the article that you–our dear inDepth readers–engaged the most with in 2019.

In the first part of this article, Tomas briefly introduces RxJS observables to make sure we all have the same understanding.

Tomas discusses the potential problem of memory leaks caused by unmanaged or unfortunately constructed subscriptions.

The important concept to learn is unsubscription. Unfortunately, managing subscriptions imperatively proves to be tedious and error-prone, even when bulking subscriptions in a parent subscription.

A more declarative approach is to use the takeUntil operator combined with a lifecycle hooks-driven subject. As it turns out, this approach is equally error-prone as Tomas stresses in the section covering this technique.

A different operator is tried out which has its own caveats. Will we never arrive at a simple solution that is easy to reason about?

We will leave it up to you to discover the best way(s) to unsubscribe from RxJS observables by reading the full article.

Special mentions

That's it for 15 of the most popular Angular inDepth articles in 2019. Let's end with special mentions of members of our growing group of experts.

Featured women of inDepth

This year's top list features writers from all around the world, but we would love to see its diversity expand to even more smart women next year. If you want to start your journey with us, you're more than welcome to reach out to us at hello@indepth.dev or send a tweet or direct message to @indepth_dev.

Let us introduce this year's active women of inDepth who are writers and members of our expert panel.

Natalia Venditto

Natalia is a Principal Frontend Software Engineer and Associate Director at Netcentric in Barcelona. She is an experienced tech speaker, having presented an incredible list of talks in the past 3 years. Natalia is also part of Women Techmakers ?‍??

Effective automated scaffolding with Angular Schematics

By Natalia Venditto

As a Tech Lead or Frontend Architect you spend time figuring out the right workspace and project structure, dependency management, file and folder naming as well as other conventions you would like the team to follow.

Natalia explains how we can use Angular CLI schematics to help the team stick to these best practices.

These schematics topics are defined:

• Rule
• Rule factory
• Tree
• Source
• Action
• Schema
• Collection
• Generator

As a case study, Natalia implements aliased Sass imports which are published in a GitHub repository linked in the article.

Ashnita Bali

Ashnita is co-organiser of the Google Developer Group in Reading, a mentor for freeCodeCamp, and an ambassador for Women Techmakers ?‍?? She is yet to finish her first article for inDepth, but we have gotten to know her through her many speaker appearances at tech conferences during these past 2 years.

From a diversity ticket to a speaker at Angular Connect

By Ashnita Bali

In her personal blog, Ashnita tells her story about how she powers through struggling to learn the many concepts involved in Angular projects. Ashnita's story is very inspirational as she has succeeded in being accepted and invited as a speaker to a long list of well-known tech conferences.

This article is part of a series of 3 articles. Make sure to read them all to get to know her story and learn how you can set goals and achieve them for yourself.

Ludmila Nesvitiy

Ludmila is a QA Automation Engineer and Tech Lead at Valor Software in Ukraine. She spends her work day getting to learn the details of user stories to set up automated tests or perform manual test procedures.

Protractor, Cypress and Applitools are some of the tehnologies, Ludmila writes about. Other than the article featured next, she has also written about managing and testing open source libraries as well as an article on testing canvas charts.

ngx-bootstrap: Angular Ivy is here

By Ludmila Nesvitiy

Ludmila and her colleague from Valor Software describe how they implemented support in ngx-bootstrap for the opt-in Ivy preview in Angular version 8. They describe in technical detail how they overcame a lot of struggles when upgrading to Ivy support. The developer-QA pair spent 5 days upgrading the library, its test suites and its companion demo applications to support Ivy.

The end result was a 13% reduction in size in the library's ES2015 bundle. However, when Gzip compression was enabled, there was actually an increase. They also identified some Ivy bugs which have since been fixed.

Nishu Goel

Nishu is a developer at IBM's UI Garage effort in India. She's also the author of the book "Step-by-Step Angular Routing" published in 2019 and authored the Udemy course "Angular for Beginners".

As a volunteer for VSO (Voluntary Service Overseas), Nishu helps fight poverty by teaching her skills to fellow world citizens. You might also have seen her at many different tech conferences and meetups. She's an industry-leading expert in her field.

Nishu has been an incredibly active writer on Medium these past few years. Make sure to visit her Medium feed.

Creating framework-agnostic web components with Angular

By Nishu Goel

Angular Elements can be used to build a library of framework-agnostic, standard-compliant web components. Nishu explains the use case for doing so in her role in which she works on many different projects using different frameworks over the years.

Nishu briefly covers the different standards that are part of the umbrella term web components. After that, we are walked through how to create a web component using Angular Elements, how to build it and publish it to NPM and finally use it in a React application.

Most active inDepth writers

This year, 12 inDepth writers published 5 or more articles on Angular inDepth. That's an incredible number! To give room to both veterans and upcoming inDepth writers, we've left out the inDepth editorial team. Instead, we'll list some of the other 8 highly active writers' most popular articles for you to explore.

Michael Karén

This Scandinavian passionate developer has been busy this year, publishing 9 inDepth articles. Michael recently became part of the ngVikings crew. We bring you some his most popular Angular inDepth articles of this year:

1. Expecting the Unexpected — Best practices for Error handling in Angular
2. How to Build a Component Library with Angular and Storybook
3. Game Development: Tetris in Angular

Oleksandr Poshtaruk

This Ukranian gentleman and master of RxJS has been typing so fast that he had to replace his computer. Oleksandr has authored affordable, even free courses on developing, understanding and testing RxJS. This year, he published an amazing 10 Angular inDepth articles, earning him a shared first place in the category Most active inDepth writer of the year.

Here are Oleksandr's crowd pleasers:

1. Beware! Angular can steal your time.
2. RxJS recipes: ‘forkJoin’ with the progress of completion for bulk network requests in Angular
3. Mastering RxJS: operators and functions that can bite you when you don’t expect

Oleksandr has noticed your interest to the point that he created the YouTube video series "Angular can waste your time".

Alexey Zuev

Alexey is a Frontend Architect at Waveaccess, ranks high on Stack Overflow, is a Google Developer Expert in Angular and maintans ng-run.com. It's a wonder that he's still had time to publish 5 INDEPTH articles this year. Let's look at his other articles that caught your attention:

1. Angular DI: Getting to know the Ivy NodeInjector
2. Angular: show loading indicator when obs$ | async is not yet resolved
3. Do you know how Angular transforms your code?

Andrew Evans

The Force is strong in this Senior Software Engineer from Capital One in Washington, D.C. Andrew published 7 inDepth articles in 2019. These are your some of your favourite ones:

1. How the AngularFire Library makes Firebase feel like Magic
2. How Cypress Makes Testing Fun
3. Why Building with a JAMstack is Awesome

Kevin Kreuzer

This talented Frontend Engineer from Switzerland managed to beat Michael Karén in becoming this year's most active inDepth writer (joining Oleksandr Poshtaruk) with his 10th article published in December. Many of them have been very popular with you, but these 3 of Kevin's articles have drawn the most of your attention:

1. Retry failed HTTP requests in Angular
2. Handling Angular environments in continuous delivery
3. Improve SPA performance by splitting your Angular libraries in multiple chunks

Nikita Poltoratsky

Nikita is a Developer Advocate at Akveo in Minsk, Belarus. Among other things, he works on their Nebula and Ngx-Admin products. Nikita has been busy traveling the world to present at a long list of conferences this year. In fact, his Angular platform talk was launched at the Angular inDepth conference.

We're happy that he also managed to make time to publish 5 Angular inDepth articles. We already discussed the most popular one, but his "Angular Platform in Depth" series has also proven to be very popular:

1. Angular Platforms in depth. Part 1. What are Angular Platforms?
2. Angular Platforms in depth. Part 2. Application bootstrap process
3. Angular Platforms in depth. Part 3. Rendering Angular applications in Terminal

Santosh Yadav

We're not sure that the Indian rockstar developer Santosh was prepared for what would happen in 2019. This year, not only did he publish 7 inDepth articles. Santosh also managed to become recognised as a Google Developer Expert in Angular and Web technologies.

Santosh has also spent a considerable amount of time contributing to open source. 1,200 GitHub contributions, 150 pull requests, 2 Angular CLI deployment builders. More than that, he also spoke at an Angular conference and at meetups. He even started a meetup group with 9 meetup events this year.

We don't know how he managed to pull all of this off at the same time, but he also joined the NestJS Addons Core Team. Oh, and he accepted a new job offer in a company that makes it easier for him to spend time doing community work.

Other than the article featured in the Top 15 for this year, these are the 3 of Santosh's articles, you enjoyed the most:

1. Exciting Times Ahead — Be Ready For Angular 9
2. Using Angular Elements with NgRx
3. What’s new After Angular 8

Oh, and he's finishing up his 8th inDepth article right now. Gotta stay busy!

Siyang "Kern" Zhao

Siyang is an independent contractor at ZSY Technology in Toronto, Canada. he specialises in Angular and Node.js. 2019 was an exciting year for Siyang. Like others fellow inDepth authors, he got accepted as a speaker for the world's biggest Angular conference, ng-conf.

In 2019, he earns the title of top Angular inDepth writer both in having one of this year's most popular articles but also by keeping up his pace throughout the year, publishing 5 inDepth articles in total. Make sure to read these 3 articles:

1. Creatively Decouple ngOnChanges
2. Build Truly Dynamic Theme with CSS Variables
3. Don’t reinvent the wheel when implementing ControlValueAccessor

Wrapping up the 2019 Angular inDepth top 15

A big thank you to all of our readers and writers–this has been an amazing year! We look forward to seeing you again in 2020 ??