Angular Addicts Issue #4: Micro Frontends, Moduliths, Tutorials & more
Tags: angular, typescript, javascript, webdev
Published: 2022-09-20 08:54:46

## 👋 Hey fellow Angular Addict

This was the fourth issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention.

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

You can read the [April (#1)](https://angularaddicts.com/angular-addicts-issue-1-nx-conf-dev-survey-more-2499fcaec1c8), [May (#2)](https://angularaddicts.com/angular-addicts-issue-2-angular-14-nx-14-rxjs-and-ngrx-tips-more-3c0e85a09d1e), [June (#3)](https://angularaddicts.com/angular-addicts-issue-3-6fddeaff8f47) and [August (#5)](https://angularaddicts.com/angular-addicts-issue-5-new-features-in-angular-14-2-bundle-size-optimization-tutorials-more-7ac29b66d421) issues [here](https://angularaddicts.com/).

---

## 💎Angular Gems of July, 2022

---

### 📰 [How to make Angular applications more robust](https://sergeygultyayev.medium.com/how-to-make-angular-applications-more-robust-855deec98fbc)

Sergey Gultyayev explains thirteen tips on how to develop Angular applications that are easier to maintain.

### 📰 [TypeScript, RXJS: Which Multicast Operator to Use for Sharing HTTP Request b/w Multiple Observers Over Different Time Periods](https://javascript.plainenglish.io/typescript-rxjs-which-multicast-operator-can-be-used-for-sharing-http-request-between-multiple-ac0a349bd9c3)

In his article, AngularEnthusiast summarizes the differences between the various NgRx multicasting techniques through practical examples.

### 📰 [Setup Module Federation in Angular with Nx](https://blog.nrwl.io/setup-module-federation-in-angular-with-nx-2f3c5c074d5f)

Colum Ferry (@coly010) walks us through the setup of Module Federation for an Angular application, he talks about how to create a new application from scratch and how to split an existing application into multiple parts.

### 📰 [CSS isolation with Angular Micro frontends](https://medium.com/@epavliy/css-isolation-with-angular-micro-frontends-eb3bd8261bb9)

Eugene Pavliy demonstrates how to create isolated CSS sandboxes for Micro frontends using:

- Module Federation
- WebComponents and
- ShadowDOM

Not all libraries are ShadowDOM friendly yet. Eugene’s article also provides useful tips on how to create workarounds in these cases.

### 📰 [Moduliths in Angular with Nx](https://levelup.gitconnected.com/moduliths-in-angular-with-nx-b8b0076794fb)

Stefan Haas highlights the key differences between the Microfrontends and Modulith architectures. He explains that Moduliths are based on Domain Driven Design and how we can split a Monolith application into separate libraries by domain, and how to enforce the library boundaries with Nx and the Angular Architect’s [DDD Plugin for Nx](https://www.npmjs.com/package/@angular-architects/ddd).

---

## 👨‍🏫 Tutorials and guides

---

### 📙 [The Complete Guide to Interceptors in Angular](https://javascript.plainenglish.io/angular-interceptors-a-complete-guide-7294e2317ecf)

In his article, Kagklis Vasileios explains:

> - what an Angular interceptor is and how it works
> - how to implement and provide one or multiple interceptors to our application
> - how to mutate requests and responses using an Angular interceptor
> - how to bypass specific or all interceptors if needed
> - other use cases as part of a demo application

### 📗 [Angular 14 Firebase CRUD Tutorial With AngularFire 7](https://betterprogramming.pub/angular-13-firebase-crud-tutorial-with-angularfire-7-2d6980dcc091)

In her tutorial, Estefanía García Gallardo creates a Pokedex CRUD application using Angular v14, Firestore and AngularFire v7.

### 📘 [How to Create a Simple Dialog Box with Angular Material](https://javascript.plainenglish.io/how-to-create-a-simple-dialog-box-with-angular-material-8cd68440ddd1)

Lynn Kwong’s article demonstrates how to create Angular Material dialogs and how to communicate with them from you application.

### 📕 [Implementing Infinite Scrolling Using Angular](https://levelup.gitconnected.com/implementing-infinite-scrolling-using-angular-82c66f27e817)

Michelle Wiginton shows us how to implement an infinite scrolling logic in Angular using [ngx-infinite-scroll](https://www.npmjs.com/package/ngx-infinite-scroll).

---

## 💬 Tweets

Here is a collection of my favourite tweets from July, 2022:

{% embed https://twitter.com/Nartc1410/status/1548460380984602624 %}

{% embed https://twitter.com/Michael_Hladky/status/1549675744325996544 %}

You can find the video of Michael’s presentation in English [here](https://www.youtube.com/watch?v=uPlEPxMJeIM&t=9s).

---

{% embed https://twitter.com/Enea_Jahollari/status/1551828584192524290 %}

{% embed https://twitter.com/Waterplea/status/1552272298505388032 %}

---

## 🙋‍♂️ 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](https://newsletter.angularaddicts.com/) 🔥


Michelle Wiginton shows us how to implement an infinite scrolling logic in Angular using ngx-infinite-scroll.