Angular Addicts Issue #5: New features in Angular 14.2, Bundle size optimization, Tutorials & more
Tags: angular, javascript, typescript, nx
Published: 2022-09-22 10:53:52


## 👋 Hey fellow Angular Addict

This is the 5th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (You can read the [first](https://angularaddicts.com/angular-addicts-issue-1-nx-conf-dev-survey-more-2499fcaec1c8), [second](https://angularaddicts.com/angular-addicts-issue-2-angular-14-nx-14-rxjs-and-ngrx-tips-more-3c0e85a09d1e), [third](https://angularaddicts.com/angular-addicts-issue-3-6fddeaff8f47) and [fourth](https://angularaddicts.com/angular-addicts-issue-4-micro-frontends-moduliths-tutorials-more-b36923db8cc2) issue here.)

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

---

## 💎 Angular Gems of August, 2022

---

### 📰 [Why Angular 14’s new inject() function is so amazing?](https://codereacter.medium.com/why-angular-14s-new-inject-function-is-so-amazing-ac281e7148d1)

The `inject()` function was introduced in Angular 14.0, it takes an `InjectionToken` as a parameter and returns its value from the currently active injector. In his article, Vlad Gheorghita shows multiple different use cases for this new feature.

### 📰 [The Ultimate Clean Architecture Template for TypeScript Projects](https://betterprogramming.pub/the-ultimate-clean-architecture-template-for-typescript-projects-e53936269bb9)

Aziz Nal shares a Typescript project architecture that allows your code to be independent of frameworks, databases, or UIs and makes your code more testable. In his [second article](https://betterprogramming.pub/how-to-implement-a-typescript-web-app-with-clean-architecture-27c7eb745ab4), he demonstrates an Angular project based on his template.

### 📰 [Optimize the Bundle Size using Source Map Explorer](https://mohammedfahimullah.medium.com/optimize-the-bundle-size-using-source-map-explorer-5e848850e578)

Mohammedfahimullah demonstrates how to analyze the bundle size of an Angular application, then shows us some interesting optimization techniques.

### 📰 [Design systems: Prototyping on steroids](https://uxdesign.cc/design-systems-prototyping-on-steroids-5056d001de50)

In his article, Daniël De Wit explains how their team creates high fidelity prototypes based on their own design system, using Angular.

---

## 📢Release and deprecation announcements

---

### 📢 Angular 14.2.0 is out 

Netanel Basal covered the most interesting new features in the following articles:

- [Using Angular NgOptimizedImage to Implement Image Loading Best Practices](https://netbasal.com/using-angular-ngoptimizedimage-to-implement-image-loading-best-practices-e20a69d71ea3)
- [Using the Angular Router API without RouterModule](https://netbasal.com/using-the-angular-router-api-without-routermodule-2d415e9d5e84)
- [Getting to Know the createApplication API in Angular](https://netbasal.com/getting-to-know-the-createapplication-api-in-angular-f1c0a2685047)

### 📢 [The State of end-to-end testing with Angular by Mark Thompson (@marktechson)](https://blog.angular.io/the-state-of-end-to-end-testing-with-angular-d175f751cb9c)

The Angular Team deprecated Protector, its last release will be released in Angular v16.

### 📢 [Nx 14.5 — Cypess v10, Output globs, Linter perf, React Tailwind support](https://blog.nrwl.io/nx-14-5-cypess-v10-output-globs-linter-perf-react-tailwind-support-c15f0b5dc2fc)

Juri Strumpflohner summarizes the changes in the latest version of NX:

- Cypress v10 and Component Testing
- Globs for Task Outputs in nx.json
- Parameter Forwarding when building dependent projects
- Nx module boundary lint rule feature improvements, it got an order of magnitude faster
- Nx Migrate improvements and Nx Repair
- Tailwind Setup Generator for React
- React Native: Add Detox config to Expo apps

---

## 👨‍🏫 Tutorials and guides

---

### 👨‍🏫 [How To Quickly Get Started With GraphQL in Angular](https://betterprogramming.pub/how-to-quickly-get-started-with-graphql-in-angular-a6fccf5f3a0c)

Haroun Chebbi walks us through the setup of an Angular project with Apollo Angular and Angular Material, then creates a country list application.

### 👨‍🏫 [What is App monitoring?](https://medium.com/globant/what-is-app-monitoring-9f6811bf07c5)

Bhoomi Bhalani explains the importance of application monitoring and demonstrates how to set up Sentry for an Angular app.

### 👨‍🏫 [How to create your own Angular Tooltip Directive](https://medium.com/accesto/how-to-create-your-own-angular-tooltip-directive-a-short-tutorial-4d58a4633495)

In his tutorial, Piotr Gołofit shows us how to create a lightweight, plain HTML/CSS based tooltip directive in Angular.

---

## 💬 Tweets

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

{% embed https://twitter.com/mgechev/status/1555297702807605248 %}

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

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

{% embed https://twitter.com/JoshuaKGoldberg/status/1562919253829124098 %}

{% embed https://twitter.com/KohlerChristian/status/1559774523511250949 %}

---

## 🙋‍♂️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/) 🔥