Скачать или смотреть Understanding Angular 11's TypeScript Configuration: es2015 Target with es2018 Lib and No Polyfills?

Explore the implications of Angular 11's TypeScript settings, focusing on the `es2015` target and `es2018` lib without polyfills. Understand how these configurations affect your development and learn how to manage polyfills effectively.
---
This video is based on the question https://stackoverflow.com/q/65250383/ asked by the user 'domin' ( https://stackoverflow.com/u/3616714/ ) and on the answer https://stackoverflow.com/a/65250659/ provided by the user 'Poul Kruijt' ( https://stackoverflow.com/u/3106920/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular 11 default TypeScript configuration: target 'es2015', lib 'es2018', but no polyfill?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Angular 11's TypeScript Configuration: es2015 Target with es2018 Lib and No Polyfills?

When bootstrapping a new Angular 11 application, developers might encounter a puzzling configuration in the tsconfig.json file. The default settings specify a target of es2015 and a library of es2018, yet it raises the question: How can Angular safely use es2018 features without any corresponding polyfills? This guide aims to break down this confusion and elucidate how to manage polyfills effectively in your Angular applications.

Configuration Overview

When initializing a fresh Angular 11 app, your tsconfig.json file will look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Alongside this configuration, a polyfills.ts file is generated, including primarily the zone.js polyfill.

The Core of the Query

The primary concern here is how Angular can benefit from new features such as async iterables and Promise.finally, which are defined in es2018, without having any polyfills enabled by default.

The Role of Polyfills in Angular

Polyfills are scripts that emulate browser features that may not be natively supported in certain environments.

In Angular, a default file named polyfills-es5.js is created, containing essential polyfills that Angular requires for its internal workings.

TypeScript Handling of es2018 Features

Here’s how Angular bridges the gap between the target and library versions:

Automatic Conversion: TypeScript automatically compiles some es2018 features into es2015. For example, features related to async functions and promises can be transpiled without necessitating a direct polyfill.

Type Compatibility: Since es2015 is a subset of es2018, it can use type definitions from es2018 without needing the complete polyfills for features that aren't actively utilized by the Angular framework itself.

Why Not Use es2015 for Lib?

The choice of es2018 for the library declaration allows developers to take advantage of newer JavaScript functionalities while maintaining the compatibility structure of es2015.

Important Consideration:

If you consider switching the target to es2018, be aware that Angular may throw a compilation warning. This is primarily due to the incompatibility of async/await with zone.js, but it can be mitigated by using the OnPush change detection strategy throughout your application.

Managing Polyfills Effectively

If you require additional features in your codebase that are not included by Angular's default polyfills, you'll need to do the following:

Edit polyfills.ts: Uncomment or add any polyfills necessary for the features your app might require.

Additional Libraries: You can integrate libraries such as core-js to fill in any gaps for broader feature support, particularly if you're targeting older browsers.

Suggested Polyfills to Add:

async iterables

Promise.finally

Any es2018 features used directly in the codebase without existing support.

Conclusion

Navigating through Angular 11's TypeScript configuration can be confusing, but understanding the relationships between the target, the specified libraries, and the use of polyfills can empower you to create robust Angular applications. By paying close attention to these configurations and managing polyfills accordingly, you can ensure that your application runs efficiently on all desired platforms.

Remember, whether you opt for the flexibility of es2018 features or stick to the established es2015, Angular provides pathways to accommodate both options effectively.