{
  "id": "guide/deprecations",
  "title": "Deprecated APIs and features",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/deprecations.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=\"deprecated-apis-and-features\">Deprecated APIs and features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#deprecated-apis-and-features\"><i class=\"material-icons\">link</i></a></h1>\n<p>Angular strives to balance innovation and stability.\nSometimes, APIs and features become obsolete and need to be removed or replaced so that Angular can stay current with new best practices, changing dependencies, or changes in the (web) platform itself.</p>\n<p>To make these transitions as easy as possible, we deprecate APIs and features for a period of time before removing them. This gives you time to update your apps to the latest APIs and best practices.</p>\n<p>This guide contains a summary of all Angular APIs and features that are currently deprecated.</p>\n<div class=\"alert is-helpful\">\n<p>Features and APIs that were deprecated in v6 or earlier are candidates for removal in version 9 or any later major version. For information about Angular's deprecation and removal practices, see <a href=\"guide/releases#deprecation-practices\" title=\"Angular Release Practices: Deprecation practices\">Angular Release Practices</a>.</p>\n<p>For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at <a href=\"https://update.angular.io\">update.angular.io</a>.</p>\n</div>\n<h2 id=\"index\">Index<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#index\"><i class=\"material-icons\">link</i></a></h2>\n<p>To help you future-proof your apps, the following table lists all deprecated APIs and features, organized by the release in which they are candidates for removal. Each item is linked to the section later in this guide that describes the deprecation reason and replacement options.</p>\n<!--\ndeprecation -> removal cheat sheet\nv4 - v7\nv5 - v8\nv6 - v9\nv7 - v10\nv8 - v11\nv9 - v12\nv10 - v13\nv11 - v14\nv12 - v15\n-->\n<table>\n<thead>\n<tr>\n<th>Area</th>\n<th>API or Feature</th>\n<th>May be removed in</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>@angular/common</code></td>\n<td><a href=\"guide/deprecations#reflectiveinjector\"><code>ReflectiveInjector</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/common</code></td>\n<td><a href=\"api/common/CurrencyPipe#currency-code-deprecation\"><code>CurrencyPipe</code> - <code>DEFAULT_CURRENCY_CODE</code></a></td>\n<td><!--v9--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code></td>\n<td><a href=\"api/common/http/XhrFactory\"><code>XhrFactory</code></a></td>\n<td><!--v12--> v15</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"guide/deprecations#core\"><code>DefaultIterableDiffer</code></a></td>\n<td><!--v7--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"guide/deprecations#core\"><code>ReflectiveKey</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"guide/deprecations#core\"><code>RenderComponentType</code></a></td>\n<td><!--v7--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"guide/deprecations#core\"><code>WrappedValue</code></a></td>\n<td><!--v10--> v12</td>\n</tr>\n<tr>\n<td><code>@angular/forms</code></td>\n<td><a href=\"guide/deprecations#ngmodel-reactive\"><code>ngModel</code> with reactive forms</a></td>\n<td><!--v6--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/upgrade</code></td>\n<td><a href=\"guide/deprecations#upgrade\"><code>@angular/upgrade</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/upgrade</code></td>\n<td><a href=\"guide/deprecations#upgrade-static\"><code>getAngularLib</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/upgrade</code></td>\n<td><a href=\"guide/deprecations#upgrade-static\"><code>setAngularLib</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td>template syntax</td>\n<td><a href=\"guide/deprecations#template-tag\"><code>&#x3C;template</code>></a></td>\n<td><!--v7--> v11</td>\n</tr>\n<tr>\n<td>polyfills</td>\n<td><a href=\"guide/deprecations#reflect-metadata\">reflect-metadata</a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td>npm package format</td>\n<td><a href=\"guide/deprecations#esm5-fesm5\"><code>esm5</code> and <code>fesm5</code> entry-points in @angular/* npm packages</a></td>\n<td><!-- v9 --> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"guide/deprecations#core\"><code>defineInjectable</code></a></td>\n<td><!--v8--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"api/core/NgModule#entryComponents\"><code>entryComponents</code></a></td>\n<td><!--v9--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core</code></td>\n<td><a href=\"api/core/ANALYZE_FOR_ENTRY_COMPONENTS\"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></td>\n<td><!--v9--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/router</code></td>\n<td><a href=\"guide/deprecations#loadChildren\"><code>loadChildren</code> string syntax</a></td>\n<td><!--v9--> v11</td>\n</tr>\n<tr>\n<td><code>@angular/core/testing</code></td>\n<td><a href=\"guide/deprecations#testing\"><code>TestBed.get</code></a></td>\n<td><!--v9--> v12</td>\n</tr>\n<tr>\n<td><code>@angular/core/testing</code></td>\n<td><a href=\"guide/deprecations#testing\"><code>async</code></a></td>\n<td><!--v9--> v12</td>\n</tr>\n<tr>\n<td><code>@angular/forms</code></td>\n<td><a href=\"api/forms/FormBuilder#group\"><code>FormBuilder.group</code> legacy options parameter</a></td>\n<td><!--v11--> v14</td>\n</tr>\n<tr>\n<td><code>@angular/router</code></td>\n<td><a href=\"guide/deprecations#activatedroute-props\"><code>ActivatedRoute</code> params and <code>queryParams</code> properties</a></td>\n<td>unspecified</td>\n</tr>\n<tr>\n<td>template syntax</td>\n<td><a href=\"guide/deprecations#deep-component-style-selector\"><code>/deep/</code>, <code>>>></code>, and <code>::ng-deep</code></a></td>\n<td><!--v7--> unspecified</td>\n</tr>\n</tbody>\n</table>\n<p>For information about Angular CDK and Angular Material deprecations, see the <a href=\"https://github.com/angular/components/blob/master/CHANGELOG.md\">changelog</a>.</p>\n<h2 id=\"deprecated-apis\">Deprecated APIs<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#deprecated-apis\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section contains a complete list all of the currently-deprecated APIs, with details to help you plan your migration to a replacement.</p>\n<div class=\"alert is-helpful\">\n<p>Tip: In the <a href=\"api\">API reference section</a> of this doc site, deprecated APIs are indicated by <del>strikethrough.</del> You can filter the API list by <a href=\"api?status=deprecated\"><strong>Status: deprecated</strong></a>.</p>\n</div>\n<a id=\"common\"></a>\n<h3 id=\"angularcommon\">@angular/common<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularcommon\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/common/CurrencyPipe#currency-code-deprecation\"><code>CurrencyPipe</code> - <code>DEFAULT_CURRENCY_CODE</code></a></td>\n<td><code>{provide: <a href=\"api/core/DEFAULT_CURRENCY_CODE\" class=\"code-anchor\">DEFAULT_CURRENCY_CODE</a>, useValue: 'USD'}</code></td>\n<td>v9</td>\n<td>From v11 the default code will be extracted from the locale data given by <code>LOCAL_ID</code>, rather than <code>USD</code>.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"common-http\"></a>\n<h3 id=\"angularcommonhttp\">@angular/common/http<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularcommonhttp\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/common/http/XhrFactory\"><code>XhrFactory</code></a></td>\n<td><code><a href=\"api/common/XhrFactory\" class=\"code-anchor\">XhrFactory</a></code> in <code>@angular/common</code></td>\n<td>v12</td>\n<td>The <code><a href=\"api/common/XhrFactory\" class=\"code-anchor\">XhrFactory</a></code> has moved from <code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code> to <code>@angular/common</code>.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"core\"></a>\n<h3 id=\"angularcore\">@angular/core<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularcore\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/core/DefaultIterableDiffer\"><code>DefaultIterableDiffer</code></a></td>\n<td>n/a</td>\n<td>v4</td>\n<td>Not part of public API.</td>\n</tr>\n<tr>\n<td><a href=\"api/core/ReflectiveInjector\"><code>ReflectiveInjector</code></a></td>\n<td><a href=\"api/core/Injector#create\"><code>Injector.create</code></a></td>\n<td>v5</td>\n<td>See <a href=\"guide/deprecations#reflectiveinjector\"><code>ReflectiveInjector</code></a></td>\n</tr>\n<tr>\n<td><a href=\"api/core/ReflectiveKey\"><code>ReflectiveKey</code></a></td>\n<td>none</td>\n<td>v5</td>\n<td>none</td>\n</tr>\n<tr>\n<td><a href=\"api/core/defineInjectable\"><code>defineInjectable</code></a></td>\n<td><code>ɵɵ<a href=\"api/core/defineInjectable\" class=\"code-anchor\">defineInjectable</a></code></td>\n<td>v8</td>\n<td>Used only in generated code. No source code should depend on this API.</td>\n</tr>\n<tr>\n<td><a href=\"api/core/NgModule#entryComponents\"><code>entryComponents</code></a></td>\n<td>none</td>\n<td>v9</td>\n<td>See <a href=\"guide/deprecations#entryComponents\"><code>entryComponents</code></a></td>\n</tr>\n<tr>\n<td><a href=\"api/core/ANALYZE_FOR_ENTRY_COMPONENTS\"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></td>\n<td>none</td>\n<td>v9</td>\n<td>See <a href=\"guide/deprecations#entryComponents\"><code>ANALYZE_FOR_ENTRY_COMPONENTS</code></a></td>\n</tr>\n<tr>\n<td><a href=\"api/core/WrappedValue\"><code>WrappedValue</code></a></td>\n<td>none</td>\n<td>v10</td>\n<td>See <a href=\"guide/deprecations#wrapped-value\">removing <code>WrappedValue</code></a></td>\n</tr>\n<tr>\n<td><a href=\"api/core/testing/async\"><code>async</code></a></td>\n<td><a href=\"api/core/testing/waitForAsync\"><code>waitForAsync</code></a></td>\n<td>v11</td>\n<td>The <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> function from <code>@angular/core/testing</code> has been renamed to <code><a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a></code> in order to avoid confusion with the native JavaScript <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> syntax. The existing function is deprecated and will be removed in a future version.</td>\n</tr>\n<tr>\n<td>[ <code>ViewChildren.emitDistinctChangesOnly</code> / <code>ContentChildren.emitDistinctChangesOnly</code></td>\n<td>none (was part of <a href=\"https://github.com/angular/angular/issues/40091\">issue #40091</a>) ]</td>\n<td>This is a temporary flag introduced as part of bugfix of <a href=\"https://github.com/angular/angular/issues/40091\">issue #40091</a> and will be removed.</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<a id=\"testing\"></a>\n<h3 id=\"angularcoretesting\">@angular/core/testing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularcoretesting\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/core/testing/TestBed#get\"><code>TestBed.get</code></a></td>\n<td><a href=\"api/core/testing/TestBed#inject\"><code>TestBed.inject</code></a></td>\n<td>v9</td>\n<td>Same behavior, but type safe.</td>\n</tr>\n<tr>\n<td><a href=\"api/core/testing/async\"><code>async</code></a></td>\n<td><a href=\"api/core/testing/waitForAsync\"><code>waitForAsync</code></a></td>\n<td>v10</td>\n<td>Same behavior, but rename to avoid confusion.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"forms\"></a>\n<h3 id=\"angularforms\">@angular/forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularforms\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"guide/deprecations#ngmodel-reactive\"><code>ngModel</code> with reactive forms</a></td>\n<td><a href=\"api/forms/FormControlDirective\"><code>FormControlDirective</code></a></td>\n<td>v6</td>\n<td>none</td>\n</tr>\n<tr>\n<td><a href=\"api/forms/FormBuilder#group\"><code>FormBuilder.group</code> legacy options parameter</a></td>\n<td><a href=\"api/forms/AbstractControlOptions\"><code>AbstractControlOptions</code> parameter value</a></td>\n<td>v11</td>\n<td>none</td>\n</tr>\n</tbody>\n</table>\n<a id=\"upgrade\"></a>\n<h3 id=\"angularupgrade\">@angular/upgrade<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularupgrade\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/upgrade\">All entry points</a></td>\n<td><a href=\"api/upgrade/static\"><code>@angular/upgrade/static</code></a></td>\n<td>v5</td>\n<td>See <a href=\"guide/upgrade\">Upgrading from AngularJS</a>.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"upgrade-static\"></a>\n<h3 id=\"angularupgradestatic\">@angular/upgrade/static<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angularupgradestatic\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API</th>\n<th>Replacement</th>\n<th>Deprecation announced</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/upgrade/static/getAngularLib\"><code>getAngularLib</code></a></td>\n<td><a href=\"api/upgrade/static/getAngularJSGlobal\"><code>getAngularJSGlobal</code></a></td>\n<td>v5</td>\n<td>See <a href=\"guide/upgrade\">Upgrading from AngularJS</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/upgrade/static/setAngularLib\"><code>setAngularLib</code></a></td>\n<td><a href=\"api/upgrade/static/setAngularJSGlobal\"><code>setAngularJSGlobal</code></a></td>\n<td>v5</td>\n<td>See <a href=\"guide/upgrade\">Upgrading from AngularJS</a>.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"deprecated-features\"></a>\n<h2 id=\"deprecated-features\">Deprecated features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#deprecated-features\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section lists all of the currently-deprecated features, which includes template syntax, configuration options, and any other deprecations not listed in the <a href=\"guide/deprecations#deprecated-apis\">Deprecated APIs</a> section above. It also includes deprecated API usage scenarios or API combinations, to augment the information above.</p>\n<a id=\"bazelbuilder\"></a>\n<h3 id=\"bazel-builder-and-schematics\">Bazel builder and schematics<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#bazel-builder-and-schematics\"><i class=\"material-icons\">link</i></a></h3>\n<p>Bazel builder and schematics were introduced in Angular Labs to let users try out Bazel without having to manage Bazel version and BUILD files.\nThis feature has been deprecated. For more information, please refer to the <a href=\"https://github.com/angular/angular/blob/master/packages/bazel/src/schematics/README.md\">migration doc</a>.</p>\n<a id=\"wtf\"></a>\n<h3 id=\"web-tracing-framework-integration\">Web Tracing Framework integration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#web-tracing-framework-integration\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular previously has supported an integration with the <a href=\"https://google.github.io/tracing-framework/\">Web Tracing Framework (WTF)</a> for performance testing of Angular applications. This integration has not been maintained and defunct. As a result, the integration was deprecated in Angular version 8 and due to no evidence of any existing usage removed in version 9.</p>\n<a id=\"deep-component-style-selector\"></a>\n<h3 id=\"deep--and-ng-deep-component-style-selectors\"><code>/deep/</code>, <code>>>></code> and <code>:ng-deep</code> component style selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#deep--and-ng-deep-component-style-selectors\"><i class=\"material-icons\">link</i></a></h3>\n<p>The shadow-dom-piercing descendant combinator is deprecated and support is being <a href=\"https://developers.google.com/web/updates/2017/10/remove-shadow-piercing\">removed from major browsers and tools</a>. As such, in v4 we deprecated support in Angular for all 3 of <code>/deep/</code>, <code>>>></code> and <code>::ng-deep</code>. Until removal, <code>::ng-deep</code> is preferred for broader compatibility with the tools.</p>\n<p>For more information, see <a href=\"guide/component-styles#deprecated-deep--and-ng-deep\" title=\"Component Styles guide, Deprecated deep and ngdeep\">/deep/, >>>, and ::ng-deep</a>\nin the Component Styles guide.</p>\n<a id=\"template-tag\"></a>\n<h3 id=\"template-tag\">&#x3C;template> tag<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#template-tag\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code>&#x3C;template></code> tag was deprecated in v4 to avoid colliding with the DOM's element of the same name (such as when using web components). Use <code>&#x3C;ng-template></code> instead. For more information, see the <a href=\"guide/angular-compiler-options#enablelegacytemplate\">Ahead-of-Time Compilation</a> guide.</p>\n<a id=\"ngmodel-reactive\"></a>\n<h3 id=\"ngmodel-with-reactive-forms\">ngModel with reactive forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#ngmodel-with-reactive-forms\"><i class=\"material-icons\">link</i></a></h3>\n<p>Support for using the <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> input property and <code>ngModelChange</code> event with reactive\nform directives has been deprecated in Angular v6 and will be removed in a future version\nof Angular.</p>\n<p>Now deprecated:</p>\n<code-example language=\"html\">\n&#x3C;input [formControl]=\"control\" [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"value\">\n</code-example>\n<code-example language=\"ts\">\nthis.value = 'some value';\n</code-example>\n<p>This has been deprecated for several reasons. First, developers have found this pattern\nconfusing. It seems like the actual <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> directive is being used, but in fact it's\nan input/output property named <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> on the reactive form directive that\napproximates some, but not all, of the directive's behavior.\nIt allows getting and setting a value and intercepting value events, but\nsome of <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code>'s other features, such as\ndelaying updates with<code>ngModelOptions</code> or exporting the directive, don't work.</p>\n<p>In addition, this pattern mixes template-driven and reactive forms strategies, which\nprevents taking advantage of the full benefits of either strategy.\nSetting the value in the template violates the template-agnostic\nprinciples behind reactive forms, whereas adding a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>/<code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> layer in\nthe class removes the convenience of defining forms in the template.</p>\n<p>To update your code before support is removed, you'll want to decide whether to stick\nwith reactive form directives (and get/set values using reactive forms patterns) or\nswitch over to template-driven directives.</p>\n<p>After (choice 1 - use reactive forms):</p>\n<code-example language=\"html\">\n&#x3C;input [formControl]=\"control\">\n</code-example>\n<code-example language=\"ts\">\nthis.control.setValue('some value');\n</code-example>\n<p>After (choice 2 - use template-driven forms):</p>\n<code-example language=\"html\">\n&#x3C;input [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"value\">\n</code-example>\n<code-example language=\"ts\">\nthis.value = 'some value';\n</code-example>\n<p>By default, when you use this pattern, you will see a deprecation warning once in dev\nmode. You can choose to silence this warning by providing a config for\n<code><a href=\"api/forms/ReactiveFormsModule\" class=\"code-anchor\">ReactiveFormsModule</a></code> at import time:</p>\n<code-example language=\"ts\">\nimports: [\n  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});\n]\n</code-example>\n<p>Alternatively, you can choose to surface a separate warning for each instance of this\npattern with a config value of <code>\"always\"</code>. This may help to track down where in the code\nthe pattern is being used as the code is being updated.</p>\n<a id=\"reflectiveinjector\"></a>\n<h3 id=\"reflectiveinjector\">ReflectiveInjector<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#reflectiveinjector\"><i class=\"material-icons\">link</i></a></h3>\n<p>In v5, Angular replaced the <code><a href=\"api/core/ReflectiveInjector\" class=\"code-anchor\">ReflectiveInjector</a></code> with the <code>StaticInjector</code>. The injector no longer requires the Reflect polyfill, reducing application size for most developers.</p>\n<p>Before:</p>\n<code-example>\nReflectiveInjector.resolveAndCreate(providers);\n</code-example>\n<p>After:</p>\n<code-example>\nInjector.create({providers});\n</code-example>\n<a id=\"loadChildren\"></a>\n<h3 id=\"loadchildren-string-syntax\">loadChildren string syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#loadchildren-string-syntax\"><i class=\"material-icons\">link</i></a></h3>\n<p>When Angular first introduced lazy routes, there wasn't browser support for dynamically loading additional JavaScript. Angular created our own scheme using the syntax <code>loadChildren: './lazy/lazy.module#LazyModule'</code> and built tooling to support it. Now that ECMAScript dynamic import is supported in many browsers, Angular is moving toward this new syntax.</p>\n<p>In version 8, the string syntax for the <a href=\"api/router/LoadChildren\"><code>loadChildren</code></a> route specification was deprecated, in favor of new syntax that uses <code>import()</code> syntax.</p>\n<p>Before:</p>\n<code-example>\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [{\n  path: 'lazy',\n  // The following string syntax for loadChildren is deprecated\n  loadChildren: './lazy/lazy.module#LazyModule'\n}];\n</code-example>\n<p>After:</p>\n<code-example>\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [{\n  path: 'lazy',\n  // The new import() syntax\n  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)\n}];\n</code-example>\n<div class=\"alert is-helpful\">\n<p><strong>Version 8 update</strong>: When you update to version 8, the <a href=\"cli/update\"><code>ng update</code></a> command performs the transformation automatically. Prior to version 7, the <code>import()</code> syntax only works in JIT mode (with view engine).</p>\n</div>\n<div class=\"alert is-helpful\">\n<p><strong>Declaration syntax</strong>: It's important to follow the route declaration syntax <code>loadChildren: () => import('...').then(m => m.ModuleName)</code> to allow <code>ngc</code> to discover the lazy-loaded module and the associated <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>. You can find the complete list of allowed syntax constructs <a href=\"https://github.com/angular/angular-cli/blob/a491b09800b493fe01301387fa9a025f7c7d4808/packages/ngtools/webpack/src/transformers/import_factory.ts#L104-L113\">here</a>. These restrictions will be relaxed with the release of Ivy since it'll no longer use <code>NgFactories</code>.</p>\n</div>\n<a id=\"activatedroute-props\"></a>\n<h3 id=\"activatedroute-params-and-queryparams-properties\">ActivatedRoute params and queryParams properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#activatedroute-params-and-queryparams-properties\"><i class=\"material-icons\">link</i></a></h3>\n<p><a href=\"api/router/ActivatedRoute\">ActivatedRoute</a> contains two <a href=\"api/router/ActivatedRoute#properties\">properties</a> that are less capable than their replacements and may be deprecated in a future Angular version.</p>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Replacement</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>params</code></td>\n<td><code>paramMap</code></td>\n</tr>\n<tr>\n<td><code>queryParams</code></td>\n<td><code>queryParamMap</code></td>\n</tr>\n</tbody>\n</table>\n<p>For more information see the <a href=\"guide/router#activated-route\">Getting route information</a> section of the <a href=\"guide/router\">Router guide</a>.</p>\n<a id=\"reflect-metadata\"></a>\n<h3 id=\"dependency-on-a-reflect-metadata-polyfill-in-jit-mode\">Dependency on a reflect-metadata polyfill in JIT mode<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular applications, and specifically applications that relied on the JIT compiler, used to require a polyfill for the <a href=\"https://github.com/rbuckton/reflect-metadata\">reflect-metadata</a> APIs.</p>\n<p>The need for this polyfill was removed in Angular version 8.0 (<a href=\"https://github.com/angular/angular-cli/pull/14473\">see #14473</a>), rendering the presence of the poylfill in most Angular applications unnecessary. Because the polyfill can be depended on by 3rd-party libraries, instead of removing it from all Angular projects, we are deprecating the requirement for this polyfill as of version 8.0. This should give library authors and application developers sufficient time to evaluate if they need the polyfill, and perform any refactoring necessary to remove the dependency on it.</p>\n<p>In a typical Angular project, the polyfill is not used in production builds, so removing it should not impact production applications. The goal behind this removal is overall simplification of the build setup and decrease in the number of external dependencies.</p>\n<a id=\"static-query-resolution\"></a>\n<h3 id=\"viewchild--contentchild-static-resolution-as-the-default\"><code>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>()</code> / <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>()</code> static resolution as the default<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#viewchild--contentchild-static-resolution-as-the-default\"><i class=\"material-icons\">link</i></a></h3>\n<p>See the <a href=\"guide/static-query-migration\">dedicated migration guide for static queries</a>.</p>\n<a id=\"contentchild-input-together\"></a>\n<h3 id=\"contentchild--input-used-together\"><code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>()</code> / <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> used together<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#contentchild--input-used-together\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following pattern is deprecated:</p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() @<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>(<a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>) tpl !: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>&#x3C;any>;\n</code-example>\n<p>Rather than using this pattern, separate the two decorators into their own\nproperties and add fallback logic as in the following example:</p>\n<code-example language=\"ts\">\n@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() tpl !: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>&#x3C;any>;\n@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>(<a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>) inlineTemplate !: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>&#x3C;any>;\n</code-example>\n<a id=\"cant-assign-template-vars\"></a>\n<h3 id=\"cannot-assign-to-template-variables\">Cannot assign to template variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#cannot-assign-to-template-variables\"><i class=\"material-icons\">link</i></a></h3>\n<p>In the following example, the two-way binding means that <code>optionName</code>\nshould be written when the <code>valueChange</code> event fires.</p>\n<code-example language=\"html\">\n&#x3C;option *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let optionName of options\" [(value)]=\"optionName\">&#x3C;/option>\n</code-example>\n<p>However, in practice, Angular simply ignores two-way bindings to template variables. Starting in version 8, attempting to write to template variables is deprecated. In a future version, we will throw to indicate that the write is not supported.</p>\n<code-example language=\"html\">\n&#x3C;option *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let optionName of options\" [value]=\"optionName\">&#x3C;/option>\n</code-example>\n<a id=\"binding-to-innertext\"></a>\n<h3 id=\"binding-to-innertext-in-platform-server\">Binding to <code>innerText</code> in <code>platform-server</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#binding-to-innertext-in-platform-server\"><i class=\"material-icons\">link</i></a></h3>\n<p><a href=\"https://github.com/fgnass/domino\">Domino</a>, which is used in server-side rendering, doesn't support <code>innerText</code>, so in platform-server's \"domino adapter\", there was special code to fall back to <code>textContent</code> if you tried to bind to <code>innerText</code>.</p>\n<p>These two properties have subtle differences, so switching to <code>textContent</code> under the hood can be surprising to users. For this reason, we are deprecating this behavior. Going forward, users should explicitly bind to <code>textContent</code> when using Domino.</p>\n<a id=\"wtf-apis\"></a>\n<h3 id=\"wtfstarttimerange-and-all-wtf-apis\"><code>wtfStartTimeRange</code> and all <code>wtf*</code> APIs<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#wtfstarttimerange-and-all-wtf-apis\"><i class=\"material-icons\">link</i></a></h3>\n<p>All of the <code>wtf*</code> APIs are deprecated and will be removed in a future version.</p>\n<a id=\"entryComponents\"></a>\n<h3 id=\"entrycomponents-and-analyze_for_entry_components-no-longer-required\"><code>entryComponents</code> and <code><a href=\"api/core/ANALYZE_FOR_ENTRY_COMPONENTS\" class=\"code-anchor\">ANALYZE_FOR_ENTRY_COMPONENTS</a></code> no longer required<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required\"><i class=\"material-icons\">link</i></a></h3>\n<p>Previously, the <code>entryComponents</code> array in the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the <code>entryComponents</code> array can be removed from existing module declarations. The same applies to the <code><a href=\"api/core/ANALYZE_FOR_ENTRY_COMPONENTS\" class=\"code-anchor\">ANALYZE_FOR_ENTRY_COMPONENTS</a></code> injection token.</p>\n<a id=\"moduleWithProviders\"></a>\n<h3 id=\"modulewithproviders-type-without-a-generic\"><code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> type without a generic<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#modulewithproviders-type-without-a-generic\"><i class=\"material-icons\">link</i></a></h3>\n<p>Some Angular libraries, such as <code>@angular/router</code> and <code>@ngrx/store</code>, implement APIs that return a type called <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> (typically via a method named <code>forRoot()</code>).\nThis type represents an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> along with additional providers.\nAngular version 9 deprecates use of <code><a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a></code> without an explicitly generic type, where the generic type refers to the type of the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>.\nIn a future version of Angular, the generic will no longer be optional.</p>\n<p>If you're using the CLI, <code>ng update</code> should <a href=\"guide/migration-module-with-providers\">migrate your code automatically</a>.\nIf you're not using the CLI, you can add any missing generic types to your application manually.\nFor example:</p>\n<p><strong>Before</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({...})\nexport class MyModule {\n  <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> forRoot(config: SomeConfig): <a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a> {\n    return {\n      ngModule: SomeModule,\n      providers: [\n        {provide: SomeConfig, useValue: config}\n      ]\n    };\n  }\n}\n</code-example>\n<p><strong>After</strong></p>\n<code-example language=\"ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({...})\nexport class MyModule {\n  <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> forRoot(config: SomeConfig): <a href=\"api/core/ModuleWithProviders\" class=\"code-anchor\">ModuleWithProviders</a>&#x3C;SomeModule> {\n    return {\n      ngModule: SomeModule,\n      providers: [\n        {provide: SomeConfig, useValue: config }\n      ]\n    };\n  }\n}\n</code-example>\n<a id=\"wrapped-value\"></a>\n<h3 id=\"wrappedvalue\"><code><a href=\"api/core/WrappedValue\" class=\"code-anchor\">WrappedValue</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#wrappedvalue\"><i class=\"material-icons\">link</i></a></h3>\n<p>The purpose of <code><a href=\"api/core/WrappedValue\" class=\"code-anchor\">WrappedValue</a></code> is to allow the same object instance to be treated as different for the purposes of change detection.\nIt is commonly used with the <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> pipe in the case where the <code>Observable</code> produces the same instance of the value.</p>\n<p>Given that this use case is relatively rare and special handling impacts application performance, we have deprecated it in v10.\nNo replacement is planned for this deprecation.</p>\n<p>If you rely on the behavior that the same object instance should cause change detection, you have two options:</p>\n<ul>\n<li>Clone the resulting value so that it has a new identity.</li>\n<li>Explicitly call <a href=\"api/core/ChangeDetectorRef#detectchanges\"><code>ChangeDetectorRef.detectChanges()</code></a> to force the update.</li>\n</ul>\n<h3 id=\"internet-explorer-11\">Internet Explorer 11<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#internet-explorer-11\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular support for Microsoft's Internet Explorer 11 (IE11) is deprecated. Maintaining support for IE11 incurs ongoing costs, including increased bundle size, code complexity, and test load. Global usage of IE11 has fallen to a point where these costs no longer warrant the additional maintenance effort. Ending IE11 support additionally allows Angular to take advantage of platform APIs present only in evergreen browsers.</p>\n<p>Microsoft announced that its 365 services will no longer support IE11 starting August 17, 2021. Microsoft previously ended support for IE11 in Microsoft Teams on November 30, 2020. For more information, see <a href=\"https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666\">Microsoft 365 apps say farewell to Internet Explorer 11</a>.</p>\n<a id=\"deprecated-cli-flags\"></a>\n<h2 id=\"deprecated-cli-apis-and-options\">Deprecated CLI APIs and Options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#deprecated-cli-apis-and-options\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section contains a complete list all of the currently deprecated CLI flags.</p>\n<h3 id=\"angular-devkitbuild-angular\">@angular-devkit/build-angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#angular-devkitbuild-angular\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API/Option</th>\n<th>May be removed in</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>extractCss</code></td>\n<td><!--v11--> v13</td>\n<td>No longer required to disable CSS extraction during development.</td>\n</tr>\n<tr>\n<td><code>i18nFormat</code></td>\n<td><!--v9--> v12</td>\n<td>Format is now automatically detected.</td>\n</tr>\n<tr>\n<td><code>i18nLocale</code></td>\n<td><!--v9--> v12</td>\n<td>New <a href=\"/guide/i18n#localize-config\">localization option</a> in version 9 and later.</td>\n</tr>\n<tr>\n<td><code>hmrWarning</code></td>\n<td><!--v11--> v13</td>\n<td>No longer has an effect.</td>\n</tr>\n<tr>\n<td><code>servePathDefaultWarning</code></td>\n<td><!--v11--> v13</td>\n<td>No longer has an effect.</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"schematicsangular\">@schematics/angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#schematicsangular\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>API/Option</th>\n<th>May be removed in</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>entryComponent</code></td>\n<td><!--v9--> v12</td>\n<td>No longer needed with Ivy.</td>\n</tr>\n<tr>\n<td><code>lintFix</code></td>\n<td><!--v11--> v12</td>\n<td>Deprecated as part of TSLint deprecation.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"removed\"></a>\n<h2 id=\"removed-apis\">Removed APIs<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#removed-apis\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following APIs have been removed starting with version 11.0.0*:</p>\n<table>\n<thead>\n<tr>\n<th>Package</th>\n<th>API</th>\n<th>Replacement</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>@angular/router</code></td>\n<td><code>preserveQueryParams</code></td>\n<td><a href=\"api/router/UrlCreationOptions#queryParamsHandling\"><code>queryParamsHandling</code></a></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p>*To see APIs removed in version 10, check out this guide on the <a href=\"https://v10.angular.io/guide/deprecations#removed\">version 10 docs site</a>.</p>\n<a id=\"esm5-fesm5\"></a>\n<h3 id=\"esm5-and-fesm5-code-formats-in-angular-npm-packages\"><code>esm5</code> and <code>fesm5</code> code formats in @angular/* npm packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages\"><i class=\"material-icons\">link</i></a></h3>\n<p>As of Angular v8, the CLI primarily consumes the <code>fesm2015</code> variant of the code distributed via <code>@angular/*</code> npm packages.\nThis renders the <code>esm5</code> and <code>fesm5</code> distributions obsolete and unnecessary, adding bloat to the package size and slowing down npm installations.</p>\n<p>This removal has no impact on CLI users, unless they modified their build configuration to explicitly consume these code distributions.</p>\n<p>Any application still relying on the <code>esm5</code> and <code>fesm5</code> as the input to its build system will need to ensure that the build pipeline is capable of accepting JavaScript code conforming to ECMAScript 2015 (ES2015) language specification.</p>\n<p>Note that this change doesn't make existing libraries distributed in this format incompatible with the Angular CLI.\nThe CLI will fall back and consume libraries in less desirable formats if others are not available.\nHowever, we do recommend that libraries ship their code in ES2015 format in order to make builds faster and build output smaller.</p>\n<p>In practical terms, the <code>package.json</code> of all <code>@angular</code> packages has changed in the following way:</p>\n<p><strong>Before</strong>:</p>\n<code-example>\n{\n  \"name\": \"@angular/core\",\n  \"version\": \"9.0.0\",\n  \"main\": \"./bundles/core.umd.js\",\n  \"module\": \"./fesm5/core.js\",\n  \"es2015\": \"./fesm2015/core.js\",\n  \"esm5\": \"./esm5/core.js\",\n  \"esm2015\": \"./esm2015/core.js\",\n  \"fesm5\": \"./fesm5/core.js\",\n  \"fesm2015\": \"./fesm2015/core.js\",\n  ...\n}\n</code-example>\n<p><strong>After</strong>:</p>\n<code-example>\n{\n  \"name\": \"@angular/core\",\n  \"version\": \"10.0.0\",\n  \"main\": \"./bundles/core.umd.js\",\n  \"module\": \"./fesm2015/core.js\",\n  \"es2015\": \"./fesm2015/core.js\",\n  \"esm2015\": \"./esm2015/core.js\",\n  \"fesm2015\": \"./fesm2015/core.js\",\n  ...\n}\n</code-example>\n<p>For more information about the npm package format, see the <a href=\"https://goo.gl/jB3GVv\">Angular Package Format spec</a>.</p>\n<a id=\"style-sanitization\"></a>\n<h3 id=\"style-sanitization-for-style-and-styleprop-bindings\">Style Sanitization for <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> and <code>[style.prop]</code> bindings<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/deprecations#style-sanitization-for-style-and-styleprop-bindings\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular used to sanitize <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> and <code>[style.prop]</code> bindings to prevent malicious code from being inserted through <code>javascript:</code> expressions in CSS <code>url()</code> entries. However, most modern browsers no longer support the usage of these expressions, so sanitization was only maintained for the sake of IE 6 and 7. Given that Angular does not support either IE 6 or 7 and sanitization has a performance cost, we will no longer sanitize style bindings as of version 10 of Angular.</p>\n\n  \n</div>\n\n<!-- links to this doc:\n - api/core/ModuleWithProviders\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/upgrade\n - guide/browser-support\n - guide/entry-components\n - guide/releases\n - guide/testing-services\n-->\n<!-- links from this doc:\n - /guide/i18n#localize-config\n - api\n - api/animations/style\n - api/common/AsyncPipe\n - api/common/CurrencyPipe#currency-code-deprecation\n - api/common/NgForOf\n - api/common/XhrFactory\n - api/common/http\n - api/common/http/XhrFactory\n - api/core/ANALYZE_FOR_ENTRY_COMPONENTS\n - api/core/ChangeDetectorRef#detectchanges\n - api/core/ContentChild\n - api/core/DEFAULT_CURRENCY_CODE\n - api/core/DefaultIterableDiffer\n - api/core/Injector#create\n - api/core/Input\n - api/core/ModuleWithProviders\n - api/core/NgModule\n - api/core/NgModule#entryComponents\n - api/core/ReflectiveInjector\n - api/core/ReflectiveKey\n - api/core/TemplateRef\n - api/core/ViewChild\n - api/core/WrappedValue\n - api/core/defineInjectable\n - api/core/testing/TestBed#get\n - api/core/testing/TestBed#inject\n - api/core/testing/async\n - api/core/testing/waitForAsync\n - api/forms/AbstractControlOptions\n - api/forms/FormBuilder#group\n - api/forms/FormControl\n - api/forms/FormControlDirective\n - api/forms/FormGroup\n - api/forms/NgModel\n - api/forms/ReactiveFormsModule\n - api/router/ActivatedRoute\n - api/router/ActivatedRoute#properties\n - api/router/LoadChildren\n - api/router/Routes\n - api/router/UrlCreationOptions#queryParamsHandling\n - api/upgrade\n - api/upgrade/static\n - api/upgrade/static/getAngularJSGlobal\n - api/upgrade/static/getAngularLib\n - api/upgrade/static/setAngularJSGlobal\n - api/upgrade/static/setAngularLib\n - api?status=deprecated\n - cli/update\n - guide/angular-compiler-options#enablelegacytemplate\n - guide/component-styles#deprecated-deep--and-ng-deep\n - guide/deprecations#activatedroute-params-and-queryparams-properties\n - guide/deprecations#activatedroute-props\n - guide/deprecations#angular-devkitbuild-angular\n - guide/deprecations#angularcommon\n - guide/deprecations#angularcommonhttp\n - guide/deprecations#angularcore\n - guide/deprecations#angularcoretesting\n - guide/deprecations#angularforms\n - guide/deprecations#angularupgrade\n - guide/deprecations#angularupgradestatic\n - guide/deprecations#bazel-builder-and-schematics\n - guide/deprecations#binding-to-innertext-in-platform-server\n - guide/deprecations#cannot-assign-to-template-variables\n - guide/deprecations#contentchild--input-used-together\n - guide/deprecations#core\n - guide/deprecations#deep--and-ng-deep-component-style-selectors\n - guide/deprecations#deep-component-style-selector\n - guide/deprecations#dependency-on-a-reflect-metadata-polyfill-in-jit-mode\n - guide/deprecations#deprecated-apis\n - guide/deprecations#deprecated-apis-and-features\n - guide/deprecations#deprecated-cli-apis-and-options\n - guide/deprecations#deprecated-features\n - guide/deprecations#entryComponents\n - guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required\n - guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages\n - guide/deprecations#esm5-fesm5\n - guide/deprecations#index\n - guide/deprecations#internet-explorer-11\n - guide/deprecations#loadChildren\n - guide/deprecations#loadchildren-string-syntax\n - guide/deprecations#modulewithproviders-type-without-a-generic\n - guide/deprecations#ngmodel-reactive\n - guide/deprecations#ngmodel-with-reactive-forms\n - guide/deprecations#reflect-metadata\n - guide/deprecations#reflectiveinjector\n - guide/deprecations#removed-apis\n - guide/deprecations#schematicsangular\n - guide/deprecations#style-sanitization-for-style-and-styleprop-bindings\n - guide/deprecations#template-tag\n - guide/deprecations#testing\n - guide/deprecations#upgrade\n - guide/deprecations#upgrade-static\n - guide/deprecations#viewchild--contentchild-static-resolution-as-the-default\n - guide/deprecations#web-tracing-framework-integration\n - guide/deprecations#wrapped-value\n - guide/deprecations#wrappedvalue\n - guide/deprecations#wtfstarttimerange-and-all-wtf-apis\n - guide/migration-module-with-providers\n - guide/releases#deprecation-practices\n - guide/router\n - guide/router#activated-route\n - guide/static-query-migration\n - guide/upgrade\n - https://developers.google.com/web/updates/2017/10/remove-shadow-piercing\n - https://github.com/angular/angular-cli/blob/a491b09800b493fe01301387fa9a025f7c7d4808/packages/ngtools/webpack/src/transformers/import_factory.ts#L104-L113\n - https://github.com/angular/angular-cli/pull/14473\n - https://github.com/angular/angular/blob/master/packages/bazel/src/schematics/README.md\n - https://github.com/angular/angular/edit/master/aio/content/guide/deprecations.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/angular/issues/40091\n - https://github.com/angular/components/blob/master/CHANGELOG.md\n - https://github.com/fgnass/domino\n - https://github.com/rbuckton/reflect-metadata\n - https://goo.gl/jB3GVv\n - https://google.github.io/tracing-framework/\n - https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666\n - https://update.angular.io\n - https://v10.angular.io/guide/deprecations#removed\n-->"
}