angular-cn/aio/dist/generated/docs/guide/migration-update-module-and-target-compiler-options.json

{
  "id": "guide/migration-update-module-and-target-compiler-options",
  "title": "Update module and target compiler options migration",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-update-module-and-target-compiler-options.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n  <h1 id=\"update-module-and-target-compiler-options-migration\">Update <code>module</code> and <code>target</code> compiler options migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-update-module-and-target-compiler-options#update-module-and-target-compiler-options-migration\"><i class=\"material-icons\">link</i></a></h1>\n<h2 id=\"what-does-this-migration-do\">What does this migration do?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-update-module-and-target-compiler-options#what-does-this-migration-do\"><i class=\"material-icons\">link</i></a></h2>\n<p>This migration adjusts the <a href=\"https://www.typescriptlang.org/v2/en/tsconfig#target\"><code>target</code></a> and <a href=\"https://www.typescriptlang.org/v2/en/tsconfig#module\"><code>module</code></a> settings within the <a href=\"guide/typescript-configuration\">TypeScript configuration files</a> for the workspace.\nThe changes to each option vary based on the builder or command that uses the TypeScript configuration file.\nUnless otherwise noted, changes are only made if the existing value was not changed since the project was created.\nThis process helps ensure that intentional changes to the options are kept in place.</p>\n<table>\n<thead>\n<tr>\n<th>TypeScript Configuration File(s)</th>\n<th>Changed Property</th>\n<th>Existing Value</th>\n<th>New Value</th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>&#x3C;workspace base>/tsconfig.json</code></td>\n<td><code>\"module\"</code></td>\n<td><code>\"esnext\"</code></td>\n<td><code>\"es2020\"</code></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code><a href=\"api/animations/browser\" class=\"code-anchor\">browser</a></code> builder options (<code>ng build</code> for applications)</td>\n<td><code>\"module\"</code></td>\n<td><code>\"esnext\"</code></td>\n<td><code>\"es2020\"</code></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code>ng-packgr</code> builder options (<code>ng build</code> for libraries)</td>\n<td><code>\"module\"</code></td>\n<td><code>\"esnext\"</code></td>\n<td><code>\"es2020\"</code></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code>karma</code> builder options (<code>ng test</code> for applications)</td>\n<td><code>\"module\"</code></td>\n<td><code>\"esnext\"</code></td>\n<td><code>\"es2020\"</code></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code>server</code> builder options (universal)</td>\n<td><code>\"module\"</code></td>\n<td><code>\"commonjs\"</code></td>\n<td><em>removed</em></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code>server</code> builder options (universal)</td>\n<td><code>\"target\"</code></td>\n<td><em>any</em></td>\n<td><code>\"es2016\"</code></td>\n<td></td>\n</tr>\n<tr>\n<td>Used in <code>protractor</code> builder options (<code>ng e2e</code> for applications)</td>\n<td><code>\"target\"</code></td>\n<td><code>\"es5\"</code></td>\n<td><code>\"es2018\"</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"why-is-this-migration-necessary\">Why is this migration necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-update-module-and-target-compiler-options#why-is-this-migration-necessary\"><i class=\"material-icons\">link</i></a></h2>\n<p>This migration provides improvements to the long-term supportability of projects by updating the projects to use recommended best practice compilation options.</p>\n<p>For the functionality that executes on Node.js, such as Universal and Protractor, the new settings provide performance and troubleshooting benefits as well.\nThe minimum Node.js version for the Angular CLI (v10.13) supports features in ES2018 and earlier.\nBy targeting later ES versions, the compiler transforms less code and can use newer features directly.\nSince zone.js does not support native <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> and <code>await</code>, the universal builds still target ES2016.</p>\n<h2 id=\"why-es2020-instead-of-esnext\">Why <code>\"es2020\"</code> instead of <code>\"esnext\"</code>?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-update-module-and-target-compiler-options#why-es2020-instead-of-esnext\"><i class=\"material-icons\">link</i></a></h2>\n<p>In TypeScript 3.9, the behavior of the TypeScript compiler controlled by <code>module</code> is the same with both <code>\"esnext\"</code> and <code>\"es2020\"</code> values.\nThis behavior can change in the future, because the <code>\"esnext\"</code> option could evolve in a backwards incompatible ways, resulting in build-time or run-time errors during a TypeScript update.\nAs a result, code can become unstable. Using the <code>\"es2020\"</code> option mitigates this risk.</p>\n\n  \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/animations/browser\n - api/common/AsyncPipe\n - guide/migration-update-module-and-target-compiler-options#update-module-and-target-compiler-options-migration\n - guide/migration-update-module-and-target-compiler-options#what-does-this-migration-do\n - guide/migration-update-module-and-target-compiler-options#why-es2020-instead-of-esnext\n - guide/migration-update-module-and-target-compiler-options#why-is-this-migration-necessary\n - guide/typescript-configuration\n - https://github.com/angular/angular/edit/master/aio/content/guide/migration-update-module-and-target-compiler-options.md?message=docs%3A%20describe%20your%20change...\n - https://www.typescriptlang.org/v2/en/tsconfig#module\n - https://www.typescriptlang.org/v2/en/tsconfig#target\n-->"
}