Angular Addicts #20: unit testing the new defer blocks, NGRX Signal store extensions, app architectures & more
Tags: angular, typescript, ngrx, javascript
Published: 2023-12-12 10:11:40

---
title: Angular Addicts #20: unit testing the new defer blocks, NGRX Signal store extensions, app architectures & more
published: true
description: My favorite Angular resources of November, 2023
tags: #angular #typescript #ngrx #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc5omnuuxrsgrd0dl23i.png
canonical_url: https://www.angularaddicts.com/p/angular-addicts-20-signal-store-extensions
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-12 10:08 +0000
---



## 👋Hey fellow Angular Addict

This is the 20th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (Here are the [19th](https://www.angularaddicts.com/p/angular-addicts-19-angular-17), [18th](https://www.angularaddicts.com/p/angular-addicts-18-new-control-flow), and [17th](https://www.angularaddicts.com/p/angular-addicts-17-signals-observables) issues.)


## 💎Angular Gems of November, 2023


### 📰[Total guide to lazy loading with Angular @defer](https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide)

Angular 17 introduced a @defer control block enabling lazy-loading of the block's content. Lazy-loading also applies to the dependencies of the content of the block: all the components, directives and pipes will be lazy-loaded, too. In his in-depth tutorial, [Tomas Trajan](https://twitter.com/tomastrajan) explains how this new feature works, how and when to use the different trigger types, what are the `@placeholder`, `@loading` & `@error` blocks, and how prefetching works.

---


### 📰[Testing Deferrable Views with Angular Testing Library](https://timdeschryver.dev/blog/testing-deferrable-views-with-angular-testing-library)

Testing Library v14.5.0 has two new functions supporting the unit testing of the new `@defer` blocks:   `renderDeferBlock` and `deferBlockStates`. In this tutorial, [Tim Deschryver](https://twitter.com/tim_deschryver) shows us how to use these new functions to easily cover the `@defer` blocks with unit tests.

---


### 📰[NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions](https://www.angulararchitects.io/en/blog/ngrx-signal-store-deep-dive-flexible-and-type-safe-custom-extensions/)

[Manfred Steyer](https://twitter.com/ManfredSteyer) wrote a three-part series about NGRX Signal Stores:



* [The new NGRX Signal Store for Angular: 3+n Flavors](https://www.angulararchitects.io/en/blog/the-new-ngrx-signal-store-for-angular-2-1-flavors/)
* [Smarter, Not Harder: Simplifying your Application With NGRX Signal Store and Custom Features](https://www.angulararchitects.io/en/blog/smarter-not-harder-simplifying-your-application-with-ngrx-signal-store-and-custom-features/)
* [NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions](https://www.angulararchitects.io/en/blog/ngrx-signal-store-deep-dive-flexible-and-type-safe-custom-extensions/)

In the latest article of his series ([NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions](https://www.angulararchitects.io/en/blog/ngrx-signal-store-deep-dive-flexible-and-type-safe-custom-extensions/)), he shows us how to implement a custom Signal Store feature. The feature helps us track a HTTP request state, with configurable property and signal names. The implemented function is type-safe, as Manfred uses (and also explains) patterns from the Signal Store implementation (created by the NGRX team).

---


### 📰[How Angular Dependency Injection works under the hood](https://medium.com/ngconf/how-angular-dependency-injection-works-under-the-hood-cc210f7040bd)

[Thomas Laforge](https://twitter.com/laforge_toma) takes a deep dive into Angular's dependency injection system, he explains:



* What is dependency injection
* What's the difference between Angular's two injector types: `EnvironmentInjector` and `NodeInjector`
* How the injector trees are created
* How to provide injectables on root and component level

---


### 📰[Applying the Onion Architecture to Angular Projects](https://medium.com/@navez.jerome/applying-the-onion-architecture-to-angular-projects-b37736d2c996)

In his blog post, [Jérôme Navez](https://www.linkedin.com/in/jerome-navez/) explains the theory behind the Onion architecture, then applies it to Angular applications. He defines four big parts in frontend projects:



* The Views: Components displayed to the user
* The Clients used to communicate with APIs;
* The State: our single source of truth;
* The Domain, that contains the logic

He explains what these parts contain and also provides source code examples.

---


### 📰[You’ve Been Building Angular Apps Wrong!](https://blog.bitsrc.io/you-have-been-building-angular-apps-wrong-abaca6bac0bc)

In this tutorial, [Thamodi Wickramasinghe](https://www.linkedin.com/in/thamodi-wickramasinghe-4b4a01140/) explains to us the basics of the microfrontend architecture, then shows us how to build a payment based application with Angular and Module Federation, containing a shell, and two microfronteds: a payment and a billing app.

---

## 👨‍💻About the author

My name is [Gergely Szerovay](https://www.linkedin.com/in/gergelyszerovay/), I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.

I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.

Next to the newsletter, I also have a publication called — you guessed it — [Angular Addicts](https://angularaddicts.com/). It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.

Let’s learn Angular together! [Subscribe here](https://www.angularaddicts.com/) 🔥

Follow me on [Substack](https://www.angularaddicts.com/), [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!


## 🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them [here](https://www.angularaddicts.com/t/angular-addicts-monthly), these are the latest 3 issues:



* [Angular Addicts #19: Angular 17, NX 17, Storybook 7.5 & more](https://www.angularaddicts.com/p/angular-addicts-19-angular-17)
* [Angular Addicts #18: Angular 17's New control flow and View transitions, Incremental static regeneration & more](https://www.angularaddicts.com/p/angular-addicts-18-new-control-flow)
* [Angular Addicts #17: Angular v16.2, Combining Signals and Observables & more](https://www.angularaddicts.com/p/angular-addicts-17-signals-observables) 


## 📨 Submit your Angular resource

Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on [Twitter](https://twitter.com/gergelyszerovay)! I might feature it in the next Angular Addicts issue!