Modern Angular. Also covers signals, standalone, SSR, zoneless, and more

Modern Angular....1

contents....6

preface....12

acknowledgments....14

about this book....16

Who should read this book....16

How this book is organized: A road map....16

About the code....17

liveBook discussion forum....18

about the author....19

about the cover illustration....20

1 Welcome to modern Angular....21

1.1 What to expect....22

1.1.1 Who will benefit from reading this book?....22

1.1.2 What do we need to know before getting started?....22

1.1.3 How is the book structured?....23

1.2 How Angular was....23

1.2.1 Angular’s core features....24

1.2.2 What is an Angular application?....25

1.3 Let’s start a modern Angular app....27

1.3.1 Using the Angular CLI....27

1.3.2 Creating a new project....28

1.3.3 What changed?....29

1.4 What’s new in Angular?....31

1.4.1 How does Angular evolve?....31

1.4.2 How does Angular recognize problems?....32

1.4.3 Current goals....33

1.4.4 New features....34

1.4.5 What about the future?....36

1.4.6 The learning process....38

Summary....38

2 A standalone future....39

2.1 Why abandon NgModules?....40

2.1.1 Hard to learn, hard to explain....40

2.1.2 Indirectness and boilerplate....42

2.1.3 Other concerns with NgModules....44

2.2 Previous solutions....44

2.2.1 Hierarchic shared modules....45

2.2.2 Enter SCAMs....45

2.3 Developing apps without NgModules....47

2.3.1 Creating our first standalone component....47

2.3.2 Routing standalone components and providing dependencies....51

2.4 Lazy-loading components....54

2.4.1 Lazy-loading with NgModules....54

2.4.2 Lazy-loading a single standalone component....55

2.4.3 Lazy-loading several standalone components....56

2.4.4 Providing dependencies only to certain routes....58

2.4.5 Lazy-loading a component into another component....59

2.5 Migrations and common pitfalls....62

2.5.1 Migrating by hand....62

2.5.2 Using SCAMs....63

2.5.3 Migrating with a schematic command....63

2.5.4 Handling circular dependencies....65

2.6 Exercises for the reader....66

Summary....66

3 Revitalized dependency injection....67

3.1 How does dependency injection work?....68

3.1.1 Why do we need DI?....68

3.1.2 Let’s build a primitive DI mechanism....69

3.1.3 Dependency injection the Angular way....70

3.1.4 Injection contexts....74

3.2 The inject function....75

3.2.1 Another way of injecting dependencies....75

3.2.2 Injecting dependencies outside classes....76

3.2.3 Why we should always use inject....78

3.2.4 What about the drawbacks?....81

3.3 Functional guards, resolvers, and interceptors....82

3.3.1 Building an AuthGuard....82

3.3.2 Building an EmployeeResolver....84

3.3.3 Adding tokens to HTTP requests....86

3.3.4 Migrating to functional guards/resolvers/interceptors....87

3.4 DI deep dive....88

3.4.1 DI lookup and how to modify it....89

3.4.2 Truncating text with DI....90

3.5 Exercises for the reader....92

Summary....92

4 New capabilities of Angular building blocks....94

4.1 Powerful inputs....95

4.1.1 Required inputs....95

4.1.2 Transforming input values....98

4.1.3 Binding routing parameters to input properties....101

4.1.4 Inputs for dynamic components....103

4.2 Host directives....108

4.2.1 Extending existing directives....108

4.2.2 Using multiple directives and adding inputs....109

4.2.3 Things to know when using host directives....110

4.3 Type-safe reactive forms....112

4.3.1 Downsides of using untyped forms....112

4.3.2 Introducing type-safe forms....113

4.3.3 Common pitfalls when working with type-safe forms....114

4.3.4 Migrating to type-safe forms....115

4.3.5 Form events....115

4.4 NgOptimizedImage....116

4.4.1 Adding lazy loading and remembering to set width/height....117

4.4.2 Prioritizing image loading....118

4.4.3 Srcsets and image loaders....118

4.5 Other improvements....120

4.5.1 Self-closing component tags....120

4.5.2 Fetch-based HttpClient....120

4.5.3 Support for default export components in routing....121

4.5.4 Improved error messages....121

4.6 Exercises for the reader....122

Summary....122

5 RxJS in modern Angular....123

5.1 What is reactive programming?....124

5.2 Why we (still) need RxJS....125

5.3 Unsubscribing from observables....126

5.3.1 Why unsubscribe?....127

5.3.2 Problems with unsubscribing....127

5.3.3 Introducing DestroyRef....128

5.3.4 The takeUntilDestroyed operator....131

5.4 Writing our own custom RxJS operators....135

5.4.1 What is an RxJS operator?....135

5.4.2 How do operators work?....137

5.4.3 Building custom operators....139

5.5 Exercises for the reader....144

Summary....144

6 Signals: A new approach to reactive programming....145

6.1 Why go beyond RxJS?....146

6.1.1 What are the problems with RxJS?....146

6.1.2 What must the solution look like?....149

6.2 What is a signal?....150

6.2.1 Creating signals....151

6.2.2 Updating signals....152

6.2.3 Creating signals vs. observables....154

6.3 Building Angular components with signals....154

6.3.1 Creating TimeOffComponent....155

6.3.2 Handling signals in Angular components....157

6.4 Computed signals....158

6.4.1 Creating computed signals....158

6.4.2 Simplifying complex logic in Angular components using computed signals....160

6.5 Effects....163

6.5.1 Creating effects....163

6.5.2 Important things to know about effects....164

6.5.3 When to use effects....166

6.6 RxJS and signals interoperability....167

6.6.1 Converting observables to signals....167

6.6.2 Converting signals to observables....169

6.7 Exercises for the reader....171

Summary....171

7 Signals: A deep dive....172

7.1 Advanced options when dealing with signals....172

7.1.1 Signal equality....173

7.1.2 Untracking dependencies....174

7.1.3 Manual cleanup....176

7.1.4 Readonly signals and synchronizing with RxJS....178

7.2 Signals under the hood....179

7.2.1 The nature of signals....179

7.2.2 How changes to signals propagate....180

7.3 State management with signals....183

7.3.1 State management: The task....183

7.3.2 State management: The implementation....184

7.3.3 State management: The problems....187

7.3.4 Advanced interoperability with RxJS....190

7.4 Migrating to signals....193

7.4.1 Migrating RxJS-heavy Angular applications....193

7.4.2 Migrating more traditional Angular applications....194

7.5 The future of signals....195

7.5.1 Signal-based components....195

7.5.2 Signal inputs and outputs....195

7.5.3 Everything else....196

7.6 Exercises for the reader....196

Summary....196

8 Unit testing in modern Angular....198

8.1 Unit testing: The what and the why....199

8.1.1 Prerequisites....199

8.1.2 What is a unit test?....199

8.1.3 Why do we want unit tests?....200

8.2 Configuring a testing environment....201

8.2.1 Choosing a test runner....201

8.2.2 Setting up the test runner....202

8.2.3 Installing third-party tools....205

8.3 Running Angular unit tests....206

8.3.1 What do unit tests look like?....206

8.3.2 Providing mock dependencies....208

8.3.3 Testing components....210

8.3.4 Testing services....214

8.3.5 Testing signals....217

8.4 Powers of AI with Angular unit tests....224

8.4.1 Unit testing Angular applications with ChatGPT....224

8.4.2 Unit testing Angular applications with GitHub Copilot....228

8.5 The future of unit testing in Angular....229

8.6 Exercises for the reader....230

Summary....230

9 Modern Angular everywhere....231

9.1 What is server-side rendering?....232

9.1.1 SSR: The what....232

9.1.2 SSR: The why....234

9.1.3 SSR: The how....236

9.2 Building Angular apps with SSR from scratch....238

9.2.1 How is an SSR Angular application different from a SPA?....238

9.2.2 Running an SSR Angular application....241

9.2.3 Building components in an SSR Angular application....243

9.3 Improving Angular SSR....248

9.3.1 HTTP caching....248

9.3.2 Client-side hydration....251

9.3.3 Prerendering....253

9.4 Building an Angular application....255

9.4.1 What does building an Angular application mean?....255

9.4.2 ESBuild and Vite....256

9.4.3 Configuring environments for Angular applications....256

9.4.4 Preparing to deploy Angular applications....258

9.5 Exercises for the reader....260

Summary....260

10 What’s next in modern Angular?....261

10.1 New template syntax....261

10.1.1 Goodbye ngIf!....262

10.1.2 Hello @for!....266

10.1.3 @switch....269

10.1.4 Migrating to the new template syntax....271

10.2 Deferrable views....272

10.2.1 Deferring a simple component....272

10.2.2 Deferring depending on a condition or trigger....274

10.2.3 Customizing deferred loading....277

10.3 Zoneless Angular applications....279

10.3.1 How change detection works in Angular....279

10.3.2 Why change detection in Angular needs to improve....282

10.3.3 ChangeDetectionStrategy.OnPush....283

10.3.4 Introducing granular change detection....285

10.3.5 Zoneless scheduler for change detection....293

10.4 In other news....295

Summary....296

index....297

Symbols....297

A....297

B....298

C....298

D....298

E....299

F....299

G....299

H....299

I....300

K....300

L....300

M....300

N....300

O....301

P....301

R....301

S....302

T....303

U....303

V....304

W....304

X....304

Z....304

The powerful Angular framework is ever-evolving, with each new iteration bringing amazing new modern features. Modern Angular gets you rapidly up to speed with Angular’s latest innovations.

Inside Modern Angular you’ll learn how to:

• Create modern Angular apps with the newest framework capabilities
• Setting up and structuring your Angular projects
• Implement advanced testing strategies for Angular
• Benefit from new improvements in debugging, image loading, and component inputs
• Apply state management with reactive programming
• Explore signals and server-side rendering
• Migrate legacy Angular projects to modern practices
• Refactor old Angular patterns using new techniques
• Use modern performance optimization approaches to improve User Experience

Discover new ways of working with components, dependency injection, RxJS, Signals, and more—all through building a complete enterprise-grade HR management system! You’ll soon be improving your daily development with Angular’s quality-of-life features, upgrading your app’s performance with server-side rendering, and getting ready for what’s coming Angular’s future. Plus, detailed migration guides demonstrate ways to update existing apps to modern patterns, and make it easy to modernize your legacy code.

About the technology

Modern web applications have to handle serious challenges, such as complex state management, reactive programming, and SEO. With a host of new features, ecosystem tools, and programming practices, the Angular web framework tackles modern web development head on. If you haven’t tried modern Angular, you’re in for a treat!

About the book

Modern Angular updates your web development skills to take advantage of new Angular features like signals, server-side rendering, and zoneless change detection. Each chapter explores an exciting capability by adding it hands-on to a full-featured app for managing HR systems. Along the way, you’ll explore dependency injection, RxJS, and standalone components, and pick up techniques for upgrading legacy apps.

What's inside

• Advanced testing strategies
• RxJS and custom operators
• Performance and search engine optimization
• Migrate legacy Angular projects

About the reader

 For experienced Angular developers. Covers Angular versions 12 and later.