❤️ Building Micro Frontends in Angular with @angular-architects/native-federation

#angular #moduleFederation

✅ Article Link

🩶 Configure Angular’s Advanced proxyConfig

#angular #proxy

Angular’s proxyConfig provides a convenient and efficient workaround for the CORS issue during development. It essentially acts as a reverse proxy, intercepting requests from your Angular application and forwarding them to the backend server.

The key benefit is that the browser sees all requests originating from the same origin (your Angular application’s development server), thus bypassing the CORS restrictions.

In essence, the workflow is as follows:

Your Angular application running on localhost:4200 makes a request to /api/data.
— The proxyConfig intercepts the request.
— The proxyConfig forwards the request to http://localhost:8080/api/data.
— The backend server processes the request and sends a response back to the proxyConfig.
— The proxyConfig relays the response back to your Angular application.

Since the request appears to originate from the same origin, the browser happily allows the communication, and you can seamlessly develop your Angular application without the CORS headache.

✅ Article Link

📵 Promise.try()

#js #promises

What is Promise.try()?
In essence, Promise.try() is a static method that wraps any function — be it synchronous, asynchronous, value-returning, or exception-throwing — into a Promise. It effortlessly handles both sync and async functions while automatically catching synchronous exceptions, preventing error leaks. 🎭

Advantages of Promise.try()
1 — Unified Handling: Seamlessly manages both synchronous and asynchronous functions, resulting in cleaner code. 🧼
2 — Exception Handling: Automatically captures synchronous exceptions, making error handling more intuitive and preventing oversights. 🕵️‍♂️
3 — Code Simplicity: Compared to traditional methods, Promise.try() enhances code readability and maintainability. 📚

✅ Article Link

📵 Mastering Touch Interactions with Hammer.js: A Complete Guide

#js #hammerjs

What is Hammer.js? 🤔
Hammer.js is a lightweight JavaScript library (only 4KB) that brings multi-touch gesture support to web applications. It’s designed to work seamlessly across both mobile and desktop platforms, with excellent browser compatibility.

✅ Article Link

💙 Strategies to Reduce Memory Usage

#angular #cdr #workers

Common Causes of High Memory Usage in Angular

1. Memory Leaks: Components and services not properly cleaned up can cause memory leaks.
2. Excessive DOM Manipulation: Too many DOM elements or frequent updates can increase memory consumption.
3. Large Data Objects in Memory: Keeping large objects or arrays in memory unnecessarily bloats memory usage.
4. Unoptimized Change Detection: Running change detection frequently for all components degrades performance.
5. Improper Use of Observables: Subscriptions that are not unsubscribed can lead to memory leaks.
6. Large Bundle Size: Loading too much JavaScript can impact memory consumption.

✅ Article Link

🤓🩶 Implementing Dependency Inversion in Angular Using Injection Tokens

#angular #services #InjectionToken

✅ Article Link

❤️ Signals + HTTP = httpResource

#angular #httpResource

🧪 Angular 19.2

The httpResource API is still experimental, but it will most likely replace all our usages of HttpClient in the near future, which is why I’m excited to share this now!

✅ Article Link 🎁 Code Link