Angular Addicts Issue #8: Angular v15, NgRx v15, Component test tips & more

My favorite Angular resources of November, 2022

👋Hey fellow Angular Addict

This is the 8th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (You can read the first, second, third, fourth, fifth, sixth and seventh issue here.)

📢Release announcements

📢Angular v15 is now available!

The new version of Angular was released this month. Minko Gechev demonstrates the most important new features with code examples:

• Standalone APIs are now our of developer preview

• Router and HttpClient tree-shakable standalone APIs

• Directive composition API

• Image directive is now stable!

• Functional router guards, Router unwraps default imports

• Better stack traces

• Release MDC-based components to stable

• More improvements in the components: Range selection support in the slider, CDK Listbox

• Improvements in the experimental esbuild support

• Automatic imports in language service

• CLI improvements

Here is his article:

Angular v15 is now available!

I share additional resources that will teach you how these new Angular features work in my following article:

Angular 15 Study Guide

📢Announcing NgRx v15: Standalone APIs, Type-safe projectors, Component and ComponentStore updates, and more!

Brandon Roberts explains the improvements in the new NgRx version:

• Standalone APIs for NgRx Libraries

• Announcing Enterprise Support

• The NgRx Component package marked as stable

• Strict Type-safety For the Selector Projector

• Simplified View Models with ComponentStore

Announcing NgRx v15: Standalone APIs, Type-safe projectors, Component and ComponentStore updates, and more!

💎Angular Gems of November, 2022

📰Component-First Architecture with Standalone Components and Nx

Component-First Architecture is a pattern for architecting our applications to fill the void left by the patterns that sprung up around NgModules.

Colum Ferry explains the concepts behind this new architecture and provides some best practices and code examples.

Component-First Architecture with Standalone Components and Nx

📰You should take advantage of the improved NgRx APIs

NgRx evolved a lot over the past years. Tim Deschryver’s post help us discover the latest NgRX APIs.

You should take advantage of the improved NgRx APIs

📰Angular Testing: Unit Testing

Quantarius Ray started a 4 part series about unit-, component-, integration- and end-to-end testing. In this second article of the series, he focuses on unit testing of components and explains why we should try to extract the business logic and functionality from our components into stores, services and directives. Ray was also featured in the AngularAir podcast: they discussed the topic of component testing.

Angular Testing: Unit Testing

📰Exploring Web Workers in Angular

Kagklis Vasileios shows us how to use web workers to perform time-consuming computations in the background, on a separate thread.

Exploring Web Workers in Angular

📰Advanced TypeScript

In his article, Kevin Kreuzer help us understand some advanced type script features:

• Union and intersection types

• Keyof, Typeof

• Conditional types

• Utility types

• Infer type

• Mapped types

Advanced TypeScript - Angular Experts

📰How to create Angular libraries and publish them (with an example)

In this article, I share my process of publishing Angular libraries and the demo app that uses one of these libraries.

How to create Angular libraries and publish them (with an example)

💬 Tweets

Here is a collection of my favorite tweets from November, 2022:

Thomas 🅰️🇨🇵 @laforge_toma

Host directive is so powerful and so much fun. 🥳 Here is a small directive for handling empty list rewritten with angular v15. great job @angular team 💯

Enea Jahollari 🅰 @Enea_Jahollari

Because Angular does destructive-hydration by default, it doesn't only destroy the DOM, but also the loaded styles, this PR is the first step to non-destructive hydration by reusing the styles generated at server-side. 🎉 github.com/angular/angula… #angular

github.comfix(platform-browser): reuse server generated component styles by alan-agius4 · Pull Request #48253 · angular/angularfix(core): generate consistent component IDs Prior to this change the component IDs where generated based on a counter. This is problematic as there is no guarantee that a component will get the sa...

Tim Deschryver @tim_deschryver

TIL about the #Angular reflectComponentType method to retrieve the metadata (inputs, outputs, selector, if it's standalone) of a component. 🔗 angular.io/api/core/refle…

Nx @NxDevTools

🔉 New Video: How to use @Cypress_io component tests with Nx! You can generate not only the component test config but also the tests themselves 🤯. 📺 Full video: youtu.be/RDO0nLGiUMY #reactjs #angular #devtools

Kevin Tale @xKevinTale

Angular tip #5 : use canMatch to skip a route dynamically in combination with functional guards. 👍Super handy when a path should lead to different comp depending on some logic 👋canLoad is going to be deprecated in favor of canMatch Code: stackblitz.com/edit/kevin-tal… #angular

🙋‍♂️Who is behind Angular Addicts?

My name is Gergely Szerovay, 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. 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 🔥

Follow me on Medium, Twitter or LinkedIn to learn more about Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

• Angular Addicts Issue #7: Standalone components and routers, Native Federation 1.0 & more

• Angular Addicts Issue #6: ng-conf 2022, NgRx best practices, Application architecture tips & more

• Angular Addicts Issue #5: New features in Angular 14.2, Bundle size optimization, Tutorials & more

📨 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 or LinkedIn! I might feature it in the next Angular Addicts issue!

---

Angular Addicts Issue #8: Angular v15, NgRx v15, Component test tips & more was originally published in Angular Addicts on Medium, where people are continuing the conversation by highlighting and responding to this story.