What's the deal with this "Write

Sign up

Sign in
Using isolatedModules in Angular 18.2
Angular
Angular Blog

Angular
·

Follow
Published in

Angular Blog
·
2 min read
·
Aug 19, 2024

Support for isolatedModules available in angular v18.2

Authors: Mark Thompson Charles Lyding

Angular now has support for TypeScript isolatedModules as of Angular 18.2. With this support in place, we’ve seen performance boosts of up to 10% in production build times.

We know that developers love performance improvements and in this blog post we’ll explain how you can take advantage of this feature in your projects.
Background

When using the application builder in your Angular app and the TypeScript isolatedModules option is enabled and script sourcemaps are disabled, TypeScript code will be transpiled via the bundler instead of the current behavior of using TypeScript. The use of the isolatedModules option ensures that TypeScript code can be safely transpiled without the need for the type-checker.
How it helps

Enabling this feature leads to several advantages. The bundler, esbuild in this case, now has knowledge of the TypeScript code constructs, such as enums, and can optimize the output code. It can inline both const and regular enums where possible. Additionally, this enables the removal of the Babel-based optimization passes for all TypeScript code. These passes are still present for all JavaScript code, for example code from third-party libraries/packages. These changes lead to an improvement in build time — especially in production configurations.
How to set it up

To enable this feature in your project, update your project’s TypeScript configuration file, typically tsconfig.json, to include "isolatedModules": true in the compilerOptions section:

"compilerOptions": {
    ...
    "isolatedModules": true
}

Note: to ensure optimal output code size in this setup, the useDefineForClassFields TypeScript option should either be removed or set to true which enables ECMAScript standard compliant behavior.

To learn more about the isolatedModules feature in TypeScript check out the documentation. Be sure to try out this update by running ng update and go build great apps.
Angular
Angular 18
Angular 18 Features
Isolatedmodules

Angular
Angular Blog
Written by Angular
1.2K Followers
·Editor for 

Angular Blog

Angular team at Google
Follow
More from Angular and Angular Blog
Updates to effect
Angular

Angular

in

Angular Blog
Latest updates to effect() in Angular
Authors: Alex Rickabaugh Mark Thompson
Oct 7
475
1
Image showing the Angular logo on a white black ground with red gradient shapes in the corners. Under the Angular logo there’s a text saying “v18 is now available”
Minko Gechev

Minko Gechev

in

Angular Blog
Angular v18 is now available!
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new…
May 23
5.2K
37
Visual with the latest Angular logo with the label “Angular” over a gradient.
Minko Gechev

Minko Gechev

in

Angular Blog
Introducing Angular v17
Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks…
Nov 8, 2023
5.1K
51
Introducing @let
Angular

Angular

in

Angular Blog
Introducing @let in Angular
Authors: Mark Thompson, Kristiyan Kostadinov
Jul 10
971
15
See all from Angular
See all from Angular Blog
Recommended from Medium
How to Generate Custom Theme (Angular Material 3)
Daniel Kreider

Daniel Kreider
How to Generate Custom Theme (Angular Material 3)
Google’s Material design system was introduced back in 2014.
Nov 5
11
Image showing the Angular logo on a white black ground with red gradient shapes in the corners. Under the Angular logo there’s a text saying “v18 is now available”
Minko Gechev

Minko Gechev

in

Angular Blog
Angular v18 is now available!
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new…
May 23
5.2K
37
Lists
General Coding Knowledge
20 stories·1717 saves
Why you should use DOCUMENT and not document in Angular
Laban Mogire

Laban Mogire
Why you should use DOCUMENT and not document in Angular
DOCUMENT is a dependency injection token provided by Angular which represents the main rendering context that is the Document Object…
Jun 21
66
1
Angular 19 — linkedSignal Deep Dive
Ingila

Ingila

in

JavaScript in Plain English
Angular 19 — linkedSignal Deep Dive
Angular 19 is on the horizon, and it’s bringing a host of exciting new features to the table. One of the most notable additions is the…
Nov 2
42
1
Angular 19: First Look at Angular’s New linkedSignal()
M Business Solutions

M Business Solutions

in

The Digital Compass
Angular 19: First Look at Angular’s New linkedSignal()
In the fast-evolving world of front-end development, Angular is always pushing boundaries to offer developers more streamlined and powerful…
Oct 27
141
2
Stop Using @ViewChild/Children Decorators! Use Signals Instead
Brian Treese

Brian Treese

in

ITNEXT
Stop Using @ViewChild/Children Decorators! Use Signals Instead
If you’re still using the old Angular @ViewChild/@ViewChildren decorators and QueryList, you’re going to want to see this!
4d ago
34
See more recommendations

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams
" and "Isolated Modules - 
isolatedModules

While you can use TypeScript to produce JavaScript code from TypeScript code, it’s also common to use other transpilers such as Babel to do this. However, other transpilers only operate on a single file at a time, which means they can’t apply code transforms that depend on understanding the full type system. This restriction also applies to TypeScript’s ts.transpileModule API which is used by some build tools.

These limitations can cause runtime problems with some TypeScript features like const enums and namespaces. Setting the isolatedModules flag tells TypeScript to warn you if you write certain code that can’t be correctly interpreted by a single-file transpilation process.

It does not change the behavior of your code, or otherwise change the behavior of TypeScript’s checking and emitting process.

Some examples of code which does not work when isolatedModules is enabled.
Exports of Non-Value Identifiers

In TypeScript, you can import a type and then subsequently export it:

import { someType, someFunction } from "someModule";
 
someFunction();
 
export { someType, someFunction };
Try

Because there’s no value for someType, the emitted export will not try to export it (this would be a runtime error in JavaScript):

export { someFunction };

Single-file transpilers don’t know whether someType produces a value or not, so it’s an error to export a name that only refers to a type.
Non-Module Files

If isolatedModules is set, namespaces are only allowed in modules (which means it has some form of import/export). An error occurs if a namespace is found in a non-module file:

namespace Instantiated {
Namespaces are not allowed in global script files when 'isolatedModules' is enabled. If this file is not intended to be a global script, set 'moduleDetection' to 'force' or add an empty 'export {}' statement.

  export const x = 1;
}
Try

This restriction doesn’t apply to .d.ts files.
References to const enum members

In TypeScript, when you reference a const enum member, the reference is replaced by its actual value in the emitted JavaScript. Changing this TypeScript:

declare const enum Numbers {
  Zero = 0,
  One = 1,
}
console.log(Numbers.Zero + Numbers.One);
Try

To this JavaScript:

"use strict";
console.log(0 + 1);
 
Try

Without knowledge of the values of these members, other transpilers can’t replace the references to Numbers, which would be a runtime error if left alone (since there are no Numbers object at runtime). Because of this, when isolatedModules is set, it is an error to reference an ambient const enum member."?