DEV Community: Tomas Trajan 🇨🇭

Top 10 Angular Architecture Mistakes You Really Want To Avoid

Tomas Trajan 🇨🇭 — Tue, 10 Sep 2024 09:38:00 +0000

In 2024, Angular keeps changing for better with ever increasing pace, but the big picture remains the same which makes architecture know-how timeless and well worth your time!

Hey there folks! The Angular renaissance continues, and it’s going even stronger in 2024 with Angular team delivering amazing things like Signal based inputs / outputs / viewChild(ren) / contentChild(ren), new control flow, @defer for seamless component lazy loading all the way to the zone-less change detection which was released in preview in Angular 18 in May!

These new APIs, syntaxes and approaches are amazing and have demonstrably positive impact on the developer experience, performance and the quality of the codebases!

BUT

At the same time, they don’t really have much impact on the way we structure our applications and workspaces. And that’s a great thing because…

Angular architecture focused know-how is basically timeless and well worth spending time on!

The way we structure and architect our Angular application stayed virtually the same from the times of ancient Angular 4 which brought us stable Router implementation with support for lazy loaded routes which is one of the most important building blocks of clean architecture (not just performance) until today!

Of course, there have been some API adjustments over time, but they mostly had effect on the more low (syntax) level instead of completely changing the way we’re doing things!

The best example to illustrate this point is the advent of the standalone components and APIs which made NgModules optional. The impact of this change is that instead of lazy loading of feature modules, we’re now lazy loading feature route configs (or root feature components).

Is it a difference? Sure!

Does it change how things are organized and structured on the higher architectural level ? NOT AT ALL!

I hope this introduction sets the tone and spiked your curiosity to learn more about Angular architecture as such know-how was, is and will stay relevant and useful! It will allow you to ensure success of your projects and provide value for you, your team and the organization you work for!

So what are the most common mistakes in the context of Angular application architecture?

Continue reading on AngularExperts.io (free)

Total guide to lazy loading with Angular @defer

Tomas Trajan 🇨🇭 — Tue, 14 Nov 2023 12:28:22 +0000

Angular 17 is here, and it has arrived with a very strong line up of amazing goodies!

The new @defer block, which allows us to lazy load Angular standalone components, is by far the most exciting and impactful feature of Angular 17 (at least in my books)!

The Angular @defer at glance

The @defer syntax allows us to lazy load any Angular standalone component with exceptionally great DX and API which covers almost every use case that you can imagine!

Continue reading at AngularExperts.io (free)

How to migrate Angular CoreModule to standalone APIs

Tomas Trajan 🇨🇭 — Tue, 05 Sep 2023 08:16:02 +0000

In this article we’re going to learn how to migrate commonly used Angular CoreModule (or any other Angular module) to standalone APIs!

Angular standalone components and APIs are the future! Angular CLI now allows us to generate new Angular applications with standalone setup out of the box, simply by using the new --standalone flag when running the ng new command!

This works really great for new greenfield projects, but we might encounter some issues in more complex enterprise environments which often tend to abstract base setup into NgModules in reusable libraries which are then consumed by multiple Angular apps.

Such module might prevent us from using of the standalone setup in consumer apps because we can't import such module directly in the new app.config.ts and the provider workaround in form of importProvidersFrom handles only providers which is often just not enough!

Continue reading on AngularExperts.io (free)»

Demystifying the Push / Pull nature of Angular Signals

Tomas Trajan 🇨🇭 — Tue, 11 Apr 2023 13:45:45 +0000

Let’s take a deep dive into what makes signals tick and how their behavior can be understood using the primitive push / pull concepts!

Continue reading on AngularExperts.io (free) »

Jest ESM — Total Guide To More Than 100% Faster Testing For Angular⚡

Tomas Trajan 🇨🇭 — Tue, 10 Jan 2023 08:55:49 +0000

Let's learn how to speed up our Angular Jest tests by more than 100% by switching to Jest ESM (a notoriously problematic migration) and how to solve all the troublesome issues that tend to pop up along the way!

TLDR;

Jest is fast until it isn't therefore we have to bother with ESM
Basic Jest ESM setup is pretty straight forward
There is an ideal Jest ESM scenario where it would just work if libraries implemented ESM correctly
In real life Jest ESM breaks because most libs ship incorrect ESM
The moduleNameMapper and transformIgnorePatterns are the main tools that will help is to fix all the Jest ESM problems
We're going to progress through list of common problems and their solutions (please share yours to make it more complete in the comments)

Continue reading on AngularExperts.io »

The Most Important Thing You Need To Understand About Angular

Tomas Trajan 🇨🇭 — Tue, 22 Nov 2022 15:34:32 +0000

The Angular "Template Context" is a practically useful mental model, which once internalized, will be your main guide on the journey to build the best possible Angular applications!

Foreword

This article is pretty long, but don’t worry, it’s not because Angular is just soooo damn complicated… It’s because we’re painting a very board picture and looking at it from all the imaginable angles so that in the end you will end up with 100% full understanding of the topic!

In theory, you could just search for the heading saying “Template context” , but I would strongly advise to check the whole thing 😉

TLDR; In Angular, template related things declarables ( components, directives and pipes ) that use each other in their templates have to be part of THE SAME “template context” which is defined by @NgModule (or the component itself when using new stand-alone components SAC approach), application then usually has multiple “origin template contexts”, namely the eager ( root ) one and then for every lazy loaded @NgModule. On the other hand, every SAC defines its own “template context” in full.

Read full article at angularexperts.io ...

The Best New Way To Cache API Responses with Angular & RxJs

Tomas Trajan 🇨🇭 — Tue, 07 Jun 2022 08:03:03 +0000

Let’s learn the best new way to implement time based caching for the API responses (or any other) RxJs streams in our Angular applications!

Continue reading on Medium »

Level Up Your NgRx Skills With 10 Time-Tested Best Practices

Tomas Trajan 🇨🇭 — Wed, 04 May 2022 08:31:05 +0000

NgRx is the most popular state management library for Angular, let’s explore set of real world proven best practices to level up your skill!

Continue reading on Medium »

The 6 Best Practices for building Custom Angular Components Library

Tomas Trajan 🇨🇭 — Tue, 20 Jul 2021 09:32:28 +0000

Let’s explore best practices & lessons learned from building of a custom component library for large enterprise organization the right way!

Continue reading on Medium »

Practical Angular: The Most Impactful RxJs Best Practice Tip Of All Time (Medium Dev.to auto import)

Tomas Trajan 🇨🇭 — Tue, 25 May 2021 14:16:55 +0000

This easy to follow tip can help YOU and your teammates to simplify and hence improve your projects significantly!

Continue reading on Medium »

The Best Way To Architect Your Angular Libraries

Tomas Trajan 🇨🇭 — Tue, 15 Sep 2020 11:08:47 +0000

The context

The ideas presented in this article are based on extensive experience from large enterprise environment (100 Angular SPAs and 30+ libs )…

To be more precise, the initial impulse to explore this topic was creation of a second “component framework” (think internal Angular Material) following this approach and comparing it to the original one which does NOT use the ng-packagr sub-entries…

What we’re going to learn

How to create Angular library implementing clean architecture from scratch (demo project included)
How to implement sub-entry per feature (and how to simplify the process using ng-samurai schematics)
How to define proper Typescript “paths” aliases
How this architecture and setup automatically saves us from using incorrect imports or introducing circular dependencies
How to analyze our library structure with madge
How to consumer library in other applications
How to make stuff private
How to bring dependencies into consumer applications (dependencies vs peer dependencies)
How to create demo application for a library in local workspace
How to make this work with jest

How to architect epic Angular app in less than 10 minutes! ⏱️

Tomas Trajan 🇨🇭 — Tue, 25 Feb 2020 09:33:00 +0000

Original photo by Grant Lemons

In this article we are going to learn how to scaffold new Angular application with clean, maintainable and extendable architecture in almost no time and what are the benefits of doing so. Besides many actionable tips, we’ll also discus guidelines about where we should implement most common things like reusable services, feature specific components and others…

For the last year and a half I have been consulting for a huge Swiss insurance enterprise organisation with more than 90 Angular apps. Yes, ninety, crazy, but also cool!

Besides that I was also pretty busy with preparation of many Angular workshop exercises which involved scaffolding of many projects from scratch.

💎 This article brings together all the lessons learned in a distilled cleaned up form for you to cut down your learning curve and help you make your Angular SPAs epic!