2019 is behind us now. At Angular inDepth, we are proud to have delivered yet another year of rich, technical deep dives into Angular and its ecosystem.

Notably, 2019 marked the occasion of our first inDepth conference. Seven of your top speakers presented detailed sessions in a two-track format filled with talks and workshops, hosted in Kiev, Ukraine. You can find the recordings over on the inDepth conference YouTube channel.

Reflecting on the past twelve months, we have put together the top 15 articles that captured your interest the most.

The collection reveals a few recurring themes. In 2019, our readers showed the strongest enthusiasm for:

  • 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

Check the list to see if you missed anything or to revisit an old favorite.

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

By Alexey Zuev

A highly requested capability in the Angular community involves assembling components dynamically according to runtime settings. The Angular team has chosen not to provide a built-in solution. As a result, the task falls on us to piece it together using Angular’s core primitives and extension points.

Alexey presents a solution that is compatible with Angular’s View Engine, supports AOT compilation, shares dependencies across Angular plugin modules without inflating bundle sizes, and includes server-side rendering capabilities. A custom Angular CLI builder is one of the techniques his approach relies on.

#14: Asynchronous Modules and Components in Angular Ivy

By Artur Androsovych

Artur investigates a range of strategies for loading modules lazily and rendering components dynamically using Ivy and Angular CDK Portal. The journey starts with experimental Ivy APIs, but the final approach uses stable Ivy APIs exclusively.

What emerges is a recipe we can adopt as a foundation for lazy-loading components or complete feature sets, independent of routing or the lazyModules CLI workspace option.

#13: How to RxJS in Angular

By Matthias Meier

Matthias takes us through straightforward samples showing how RxJS and Angular interact. The covered methods and scenarios include:

  • Observable input properties
  • Observable DOM events
  • Cancelling in-flight HTTP requests
  • Using the AsyncPipe to let Angular oversee subscriptions
  • Stopping duplicate HTTP calls when multiple subscriptions arise
  • Preventing memory leaks while juggling multiple subscriptions

#12: Tooltip with Angular CDK

By Nikita Poltoratsky

Drawing on his work creating a UI component library with Angular CDK, Nikita guides us through crafting a tooltip directive.

We understand how to apply:

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

#11: Google Maps is now an Angular component

By Tim Deschryver

Google has begun offering official Angular components for its products through the Angular Components project. This kicked off with the YouTube player in Angular version 8.2. The subsequent official offering wraps the Google Maps JavaScript API, and Tim details this in his article.

We explore the methods, inputs, and outputs of:

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

The Angular Google Maps package is set to launch in conjunction with Angular version 9.

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

By Michael Lorton

Handling subscriptions directly in an imperative style tends to be cumbersome and prone to mistakes, as Michael demonstrates in this piece by examining the cases where manual subscription in Angular components and services is truly unavoidable—and where it isn't.

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

By Lars Gyrup Brink Nielsen

Building on his conference talk of the same title, Lars digs into how evolving injection APIs in Angular, combined with the upcoming Ivy runtime, could make NgModules largely redundant through the use of experimental features.

The reader is introduced to tree-shakable components and SCAMs. The former represents a set of desirable traits for components that Ivy might enable in the future.

SCAMs, short for Single Component Angular Modules, offer a safe stepping stone toward tree-shakable components while providing additional advantages of their own.

Additionally, the notion of transitive module scope is clarified, shedding light on how Angular links declarable dependencies across the application.

#8: How to Start Flying with Angular and NgRx

By Andrew Evans

Goose Weather is an open-source application for North American weather, named for Andrew's wife, who dreamed of becoming a meteorologist in her childhood.

Through a guided tour of cloning and running Goose Weather on a local machine, Andrew explains the foundational NgRx principles—store, reducers, actions, selectors, and effects—by tackling straightforward use cases.

The walkthrough proceeds in a sequential, easy-to-follow fashion, making it an ideal starting point for those brand new to NgRx.

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

By Max Koretskyi

In a short span of time, Max has accelerated his professional trajectory by honing his expertise through contributing on Stack Overflow, authoring articles, and speaking at events focused on Angular. These efforts led to distinctions as a Google Developer Expert in Angular and a Microsoft Most Valuable Professional.

This marks a substantial shift, since just a few years prior, Max was on the verge of leaving the tech field after failing to discover his true interest. He ultimately found his calling in Angular, which, being relatively new at the time, had few authors covering anything beyond the fundamentals.

His journey culminated in securing a coveted developer advocate position with ag-Grid. More significantly, despite encountering various hurdles along the way, Max persisted through about 90-hour work weeks, balancing his day job with personal development projects and initiatives.

Sit back and take in the compelling narrative of how Max Koretskyi rose to prominence as a key figure in the Angular community.

#6: Brace yourself. Angular 8 is coming

By Santosh Yadav & Roman Yavoriv

In the lead-up to Angular version 8's debut, Santosh and Roman teamed up to examine the fresh and exciting features bundled in the release.

Topics discussed:

  • 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

A straightforward set of 4 actions to speed up how quickly our pages load:

  1. Measure the size of our bundles
  2. Confirm that Gzip compression is enabled for our bundles
  3. Identify which bundles are the largest
  4. Define bundle size thresholds

To close out, Siyang suggests lazy-loading bundles as a way to push our app’s performance even further.

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

By “Trotyl” Yu

Our in-house Chinese Angular Collaborator, going by the alias “Trotyl” Yu, merges two different approaches with NG-VDOM—a library that adapts TSX, functional components, and class components into Angular apps, much like what we see with its framework counterparts React and Vue.

Within the piece, Trotyl walks through the modeling of a virtual DOM. We also learn about how Angular expose behaves for both objects and collections, and how NG-VDOM uses them to manage change detection in conjunction with the virtual DOM.

This library is far from done. Right now it only supports a subset of features, although many more are on the roadmap.

So when does a virtual DOM make sense? For developers coming from React or Vue it feels familiar, but Trotyl also points out that for highly dynamic or complex user interfaces, NG-VDOM might use less memory than traditionally compiled Angular templates.

#3: Top 10 ways to use Interceptors in Angular

By Michael Karén

Michael presents his top 10 HTTP interceptor use cases, drawn from his own hands-on work as well as input from the Angular inDepth expert panel.

The article kicks off with an overview of HTTP interceptors. Subsequent use cases cover everything from URL tweaking and loading spinners to transforming and mapping responses, as well as attaching the X-Man HTTP header—perfect for the legendary Wolverine (or, more practically, XSRF tokens).

We will let you delve into the rest of the article to uncover the remaining interceptors that round out the list.

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

By Eliran Eliassy

The upcoming Ivy renderer, compiler, and runtime has everyone buzzing. For a couple of years, it’s only been accessible through feature flags. With Angular version 8, Ivy arrived as an “opt-in preview.”

In this write-up, Eliran examines some design patterns that Ivy opens the door for, either right away or with a bit of extra effort.

One of Ivy’s key promises is reduced bundle sizes. Eliran uses his own site as a real-world example, showing a 15% drop in bundle size after moving from View Engine to Ivy compilation.

To illustrate why that shrink seems almost magical, Eliran compiles a basic component using both engines. By highlighting the contrasts, he shows that most of Ivy’s runtime pieces can be tree-shaken away.

There’s also another plus: Ivy gives us clearer error messages for template issues.

Dynamic import statements exist for both View Engine and Ivy apps, letting us lazy-load Angular modules—or essentially any EMCAScript modules.

Eliran then dynamically lazy-loads a feature module governed by NgModules. From there, he previews an experimental Ivy helper that lets components boot without a module.

That naturally leads to: are Angular modules still needed? As covered in article #9 of this list, some module responsibilities can be handled separately, and the Angular team is using Ivy to explore making modules optional at some point.

Eliran closes his piece by introducing higher-order components through a custom class decorator. This decorator attaches metadata to a component that doesn’t rely on NgModules and also adds a bespoke lifecycle hook, with a handy reference link included.

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

By Tomas “Trajan”

Let’s dive straight into what our cherished readers clicked on most during 2019.

Tomas kicks things off with a quick primer on RxJS observables so everyone shares the same baseline.

He then highlights the memory leak risks that arise from subscriptions that are poorly managed or carelessly assembled.

The key takeaway revolves around unsubscription. Handling subscriptions imperatively quickly becomes tedious and prone to mistakes, even when you group them into a parent subscription.

Switching to a declarative style, the takeUntil operator paired with a subject driven by lifecycle hooks seems promising. Yet Tomas points out in that section that it’s just as fallible.

Another operator gets a try, but it too comes with its own drawbacks. Is there truly a straightforward solution that’s easy to wrap your head around?

We’ll let you find out by reading the article to uncover the optimal unsubscribe strategies.

Special mentions

That wraps up the top 15 Angular inDepth posts of 2019. Before closing, let’s give a shout-out to some standout members of our expanding expert community.

This year’s ranking included voices from across the globe, and we’re hoping to see even more brilliant women join the mix next year. If you’re keen to begin with us, feel free to reach out at indepthangular@gmail.com or ping us via tweet or DM to @Angular_InDepth.

Here are the women of inDepth who were active this year as writers and panel experts.

Natalia Venditto

Natalia serves as a Principal Frontend Software Engineer and Associate Director at Netcentric in Barcelona. She’s a seasoned conference speaker, having delivered an impressive array of talks over the last three years. She’s also part of Women Techmakers ?‍??

Effective automated scaffolding with Angular Schematics

By Natalia Venditto

As a Tech Lead or Frontend Architect, you often invest time in deciding on the ideal workspace setup, project layout, dependency handling, naming conventions, and other team guidelines.

Natalia demonstrates how Angular CLI schematics can keep teams aligned with these practices.

She covers these schematics concepts:

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

As a practical example, she builds aliased Sass imports and shares the code in a linked GitHub repository.

Ashnita Bali

Ashnita co-organizes the Google Developer Group in Reading, mentors for freeCodeCamp, and serves as an ambassador for Women Techmakers ?‍?? While she hasn’t published her first inDepth article yet, we’ve seen her shine through numerous conference talks over the past two years.

From a diversity ticket to a speaker at Angular Connect

By Ashnita Bali

In her personal blog, Ashnita shares how she pushes through the steep learning curve of Angular’s many concepts. Her journey is truly motivating, as she’s managed to get accepted and invited to speak at a host of well-known tech events.

This post kicks off a 3-part series. Reading them all will give you the full picture of her path and how to set and hit your own goals.

Ludmila Nesvitiy

Ludmila works as a QA Automation Engineer and Tech Lead at Valor Software in Ukraine. Her daily routine involves digging into the details of user stories to craft automated test suites or carry out manual testing tasks.

Her writing covers tools like Protractor, Cypress and Applitools. Beyond the piece highlighted below, she has contributed content on managing and testing open source libraries, plus a guide on testing canvas charts.

ngx-bootstrap: Angular Ivy is here

By Ludmila Nesvitiy

Together with a teammate from Valor Software, Ludmila recounts the process of adding support in ngx-bootstrap for the optional Ivy preview shipped with Angular version 8. The article walks through the technical hurdles they faced while adapting the library for Ivy. This developer-QA duo dedicated 5 days to upgrading the library, its test suites and the accompanying demo apps to work with Ivy.

Ultimately, they achieved a 13% shrink in the library’s ES2015 bundle size. With Gzip compression turned on, though, the numbers went in the opposite direction. Along the way, they uncovered several Ivy bugs that have since been patched.

Nishu Goel

Nishu is a developer with IBM’s UI Garage initiative in India. She authored the 2019 book “Step-by-Step Angular Routing” and also put together the Udemy course “Angular for Beginners”.

Through her volunteer work with VSO (Voluntary Service Overseas), Nishu contributes to fighting poverty by sharing her expertise with people around the globe. She’s a familiar face at numerous tech conferences and community meetups, and she’s recognized as a top expert in her field.

Over the last few years, Nishu has been a prolific contributor on Medium. Be sure to check out her Medium profile.

Creating framework-agnostic web components with Angular

By Nishu Goel

Angular Elements lets you assemble a collection of framework-agnostic, standards-compliant web components. Nishu explains why this approach matters in her own work, where she has juggled projects built with a variety of frameworks over time.

She touches on the different standards that fall under the web components umbrella. From there, she guides readers through building a web component with Angular Elements, compiling it, publishing it to NPM, and finally integrating it into a React app.

Most active inDepth writers

Twelve inDepth authors managed to publish 5 or more articles on the publication this year—quite an achievement! To shine a light on both seasoned contributors and rising stars, we’ve skipped the inDepth editorial crew. Instead, we’re featuring the top articles from the other 8 highly productive writers for your reading pleasure.

Michael Karén

This enthusiastic developer from Scandinavia has kept busy in 2019, putting out 9 inDepth pieces. Michael recently joined the ngVikings team. Here are some of his most-read Angular inDepth articles from 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 guy from Ukraine, a true RxJS wizard, has been typing at such a pace that his computer gave out and needed replacing. Oleksandr offers affordable—sometimes free—courses on building, understanding, and testing RxJS. In 2019, he delivered an impressive 10 Angular inDepth articles, tying for first place in the Most active inDepth writer of the year category.

Below are Oleksandr’s fan favorites:

  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

Your fascination with this topic did not go unnoticed by Oleksandr, who went on to produce a dedicated YouTube series titled “Angular can waste your time“.

Alexey Zuev

Alexey serves as a Frontend Architect at Waveaccess, holds a high rank on Stack Overflow, is a Google Developer Expert in Angular, and keeps ng-run.com running. That he still found room in his schedule for 5 INDEPTH articles this year is quite remarkable. Here are the other pieces from him that drew your eye:

  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

This Senior Software Engineer at Capital One in Washington, D.C. clearly has the Force with him. In 2019, Andrew put out 7 inDepth articles, and among them, these few became your clear favorites:

  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 skilled Frontend Engineer from Switzerland topped Michael Karén to become the year’s most prolific inDepth writer (tied with Oleksandr Poshtaruk) when his 10th article landed in December. While many of his pieces have found an audience with you, these three from Kevin captured your focus most strongly:

  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 holds the role of Developer Advocate at Akveo in Minsk, Belarus, where he contributes to their Nebula and Ngx-Admin offerings. This year, his schedule was packed with international travel for a lengthy series of conference appearances. Notably, his Angular platform session made its debut at the Angular inDepth conference.

We are glad he still carved out time to produce 5 Angular inDepth articles. The most popular one has already been covered, yet his “Angular Platform in Depth” series has also won considerable favor:

  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

It’s doubtful that Santosh, the Indian developer with a rockstar persona, foresaw the twist his year would take. Beyond dropping 7 inDepth articles, he achieved recognition as a Google Developer Expert in Angular and Web technologies during this period.

Open source also consumed a large share of Santosh’s time. He racked up 1,200 GitHub contributions, submitted 150 pull requests, and crafted 2 Angular CLI deployment builders. Additionally, he took the stage at an Angular conference, addressed meetups, and even launched his own meetup group that held 9 events over the year.

The source of his energy remains a mystery, but he also found time to join the NestJS Addons Core Team. On top of that, he accepted a new role at a company that gives him more flexibility to dedicate himself to community initiatives.

Apart from the article that made this year’s Top 15, here are the 3 pieces by Santosh that resonated most with you:

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

And as we speak, he’s putting the final touches on his 8th inDepth article. Keeping busy!

Siyang “Kern” Zhao

Based in Toronto, Canada, Siyang works as an independent contractor at ZSY Technology, specialising in Angular and Node.js. The past year proved eventful for him. Like his fellow inDepth contributors, he secured a speaking slot at ng-conf, the premier Angular conference globally.

During 2019, he claimed the distinction of being the top Angular inDepth author—both by penning one of the year’s viral pieces and through consistent output, delivering 5 inDepth articles altogether. Here are the 3 you shouldn’t skip:

  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 heartfelt thank you goes out to every reader and writer—this year has been incredible! We’re eager to reconnect in 2020 ??