What’s New in Angular 13: Simplifying Builds and Testing

Date: January 15, 2022

---

Introduction

Angular 13 continues the framework’s evolution with key improvements focused on simplifying build processes, enhancing testing workflows, and modernizing support for Node.js. These changes make developing Angular apps smoother and more efficient.

In this post, we’ll cover:

• The new library packaging format
• Updates to TestBed teardown for cleaner tests
• Official support for Node.js v16+
• Practical examples and migration tips

---

1. New Library Packaging Format: No More View Engine

Previously, Angular libraries were packaged using View Engine, Angular’s old compilation and rendering pipeline. Angular 13 removes View Engine completely, switching fully to the Ivy compilation and rendering engine.

Why does this matter?

• Simplified builds: No need to compile with two different engines.
• Faster compilation for libraries.
• Smaller package sizes thanks to Ivy’s efficient code generation.
• Easier debugging and better stack traces.

---

Migrating Libraries

If you maintain Angular libraries, update your tsconfig.lib.json to remove the View Engine compatibility flag:

{
  "angularCompilerOptions": {
    "compilationMode": "partial"
  }
}

Ensure your libraries target Ivy. If you use third-party libraries compiled with View Engine, most popular ones have updated to Ivy by now.

---

2. TestBed Teardown Improvements

Testing Angular components often involves TestBed, Angular’s testing utility. Previously, tests sometimes left behind global state that could affect subsequent tests.

Angular 13 introduces automatic teardown by default.

This means:

• Test environments clean up after each test run.
• Reduced test flakiness and memory leaks.
• No more manual TestBed.resetTestingModule() calls needed.

---

Example: Before Angular 13

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [MyComponent],
  });
});

afterEach(() => {
  TestBed.resetTestingModule(); // Required to avoid test pollution
});

After Angular 13 (automatic teardown enabled)

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [MyComponent],
  });
});

// No afterEach needed!

You can control teardown behavior explicitly if necessary:

TestBed.configureTestingModule({
  teardown: { destroyAfterEach: true }
});

---

3. Node.js v16+ Support

Angular 13 officially supports Node.js v16 and later, aligning with the latest LTS versions.

• Improves build performance with updated Node APIs.
• Enables modern ECMAScript features during build.
• Note: Support for older Node versions (e.g., v12) is dropped.

If your environment is still on older Node versions, it’s time to upgrade!

---

4. Additional Notable Updates

• Angular CLI improvements — faster builds and better error messages.
• Component API enhancements — new ways to define inputs and outputs.
• Deprecations — some legacy APIs are deprecated to encourage modern best practices.

---

Summary

Feature	Benefit	Developer Impact
Ivy-only library format	Smaller bundles, faster builds	Update libraries and dependencies
Automatic TestBed teardown	Cleaner, more reliable tests	Simplify test code
Node.js v16+ support	Modern tooling and better performance	Upgrade Node.js versions

---

Conclusion

Angular 13 simplifies your development and testing experience, making builds faster and tests cleaner without sacrificing compatibility. If you haven’t upgraded yet, now is the perfect time.

---

Ready to upgrade? Run:

ng update @angular/core@13 @angular/cli@13

and enjoy a smoother Angular development experience!

---