Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs: add info about v15 changes and update process (#47951)

Browse source 
PR Close #47951
This commit is contained in:
Bob Watson 2022-11-09 08:40:22 -08:00 committed by Jessica Janiuk
parent c9cb0c014f
commit 032a488d02
7 changed files with 339 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.pullapprove.yml
View file

@ -933,6 +933,8 @@ groups:
'aio/content/guide/migration-module-with-providers.md',
'aio/content/guide/static-query-migration.md',
'aio/content/guide/update-to-latest-version.md',
'aio/content/guide/update-to-version-14.md',
'aio/content/guide/update-to-version-15.md'
])
reviewers:
users:

178
aio/content/guide/deprecations.md
View file

@ -3,7 +3,7 @@
Angular strives to balance innovation and stability.
Sometimes, 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.
To make these transitions as easy as possible, we deprecate APIs and features for a period of time before removing them.
To make these transitions as easy as possible, APIs and features are deprecated for a period of time before they are removed.
This gives you time to update your applications to the latest APIs and best practices.
This guide contains a summary of all Angular APIs and features that are currently deprecated.
@ -38,65 +38,95 @@ v14 - v17
v15 - v18
-->
| Area | API or Feature | May be removed in |
|:--- |:--- |:--- |
| `@angular/common` | [`ReflectiveInjector`](#reflectiveinjector) | <!-- v8 --> v11 |
| `@angular/common` | [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | <!-- v9 --> v11 |
| `@angular/common` | [`NgComponentOutlet.ngComponentOutletNgModuleFactory`](#common) | <!-- v14 --> v17 |
| `@angular/common/http` | [`XhrFactory`](api/common/http/XhrFactory) | <!-- v12 --> v15 |
| `@angular/common/http/testing` | [`TestRequest` accepting `ErrorEvent` for error simulation](#testrequest-errorevent) | <!-- v13 --> v16 |
| `@angular/core` | [`DefaultIterableDiffer`](#core) | <!-- v7 --> v11 |
| `@angular/core` | [`ReflectiveKey`](#core) | <!-- v8 --> v11 |
| `@angular/core` | [`RenderComponentType`](#core) | <!-- v7 --> v11 |
| `@angular/core` | [Factory-based signature of `ApplicationRef.bootstrap`](#core) | <!-- v13 --> v15 |
| `@angular/core` | [`PlatformRef.bootstrapModuleFactory`](#core) | <!-- v13 --> v15 |
| `@angular/core` | [`getModuleFactory`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`ModuleWithComponentFactories`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`Compiler`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`CompilerFactory`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`NgModuleFactory`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`ComponentFactory`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`ComponentFactoryResolver`](#core) | <!-- v13 --> v16 |
| `@angular/core` | [`CompilerOptions.useJit and CompilerOptions.missingTranslation config options`](#core) | <!-- v13 --> v16 |
| `@angular/core` | NgModule and `'any'` options for [`providedIn`](#core) | <!-- v15 --> v17 |
| `@angular/platform-browser-dynamic` | [`JitCompilerFactory`](#platform-browser-dynamic) | <!-- v13 --> v16 |
| `@angular/platform-browser-dynamic` | [`RESOURCE_CACHE_PROVIDER`](#platform-browser-dynamic) | <!-- v13 --> v16 |
| `@angular/forms` | [`ngModel` with reactive forms](#ngmodel-reactive) | <!-- v6 --> v11 |
| `@angular/upgrade` | [`@angular/upgrade`](#upgrade) | <!-- v8 --> v11 |
| `@angular/upgrade` | [`getAngularLib`](#upgrade-static) | <!-- v8 --> v11 |
| `@angular/upgrade` | [`setAngularLib`](#upgrade-static) | <!-- v8 --> v11 |
| `@angular/upgrade` | [Factory-based signature of `downgradeModule`](#upgrade-static) | <!-- v13 --> v15 |
| template syntax | [`<template>`](#template-tag) | <!-- v7 --> v11 |
| polyfills | [reflect-metadata](#reflect-metadata) | <!-- v8 --> v11 |
| `@angular/compiler-cli` | [Input setter coercion](#input-setter-coercion) | <!-- v13 --> v15 |
| `@angular/compiler-cli` | [`fullTemplateTypeCheck`](#full-template-type-check) | <!-- v13 --> v15 |
| `@angular/core` | [`defineInjectable`](#core) | <!-- v8 --> v11 |
| `@angular/core` | [`entryComponents`](api/core/NgModule#entryComponents) | <!-- v9 --> v11 |
| `@angular/core` | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | <!-- v9 --> v11 |
| `@angular/core` | [Factory-based signature of `ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent) | <!-- v13 --> v15 |
| `@angular/core/testing` | [`TestBed.get`](#testing) | <!-- v9 --> v12 |
| `@angular/core/testing` | [`async`](#testing) | <!-- v9 --> v12 |
| `@angular/forms` | [`FormBuilder.group` legacy options parameter](api/forms/FormBuilder#group) | <!-- v11 --> v14 |
| `@angular/platform-server` | [`renderModuleFactory`](#platform-server) | <!-- v13 --> v15 |
| `@angular/platform-server` | [`ServerTransferStateModule`](#platform-server) | <!-- v14 --> v16 |
| `@angular/platform-browser` | [`BrowserTransferStateModule`](#platform-browser) | <!-- v14 --> v16 |
| `@angular/router` | [`relativeLinkResolution`](#relativeLinkResolution) | <!-- v14 --> v16 |
| `@angular/router` | [`resolver` argument in `RouterOutletContract.activateWith`](#router) | <!-- v14 --> v16 |
| `@angular/router` | [`resolver` field of the `OutletContext` class](#router) | <!-- v14 --> v16 |
| `@angular/router` | [`RouterLinkWithHref` directive](#router) | <!-- v15 --> v17 |
| `@angular/router` | [`provideRoutes` function](#router) | <!-- v15 --> v17 |
| `@angular/router` | [setupTestingRouter](#router) | <!-- v15.1 --> v17 |
| `@angular/service-worker` | [`SwUpdate#activated`](api/service-worker/SwUpdate#activated) | <!-- v13 --> v16 |
| `@angular/service-worker` | [`SwUpdate#available`](api/service-worker/SwUpdate#available) | <!-- v13 --> v16 |
| template syntax | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector) | <!-- v7 --> unspecified |
| template syntax | [`bind-`, `on-`, `bindon-`, and `ref-`](#bind-syntax) | <!-- v13 --> v15 |
| `@angular/common` | [`DatePipe` - `DATE_PIPE_DEFAULT_TIMEZONE`](api/common/DATE_PIPE_DEFAULT_TIMEZONE) | <!-- v15 --> v17 |
### Deprecated features that can be removed in v11 or later
For information about Angular CDK and Angular Material deprecations, see the [changelog](https://github.com/angular/components/blob/main/CHANGELOG.md).
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/common` | [`ReflectiveInjector`](#reflectiveinjector) | v8 | v11 |
| `@angular/common` | [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | v9 | v11 |
| `@angular/core` | [`DefaultIterableDiffer`](#core) | v7 | v11 |
| `@angular/core` | [`ReflectiveKey`](#core) | v8 | v11 |
| `@angular/core` | [`RenderComponentType`](#core) | v7 | v11 |
| `@angular/core` | [`defineInjectable`](#core) | v8 | v11 |
| `@angular/core` | [`entryComponents`](api/core/NgModule#entryComponents) | v9 | v11 |
| `@angular/core` | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | v9 | v11 |
| `@angular/forms` | [`ngModel` with reactive forms](#ngmodel-reactive) | v6 | v11 |
| `@angular/upgrade` | [`@angular/upgrade`](#upgrade) | v8 | v11 |
| `@angular/upgrade` | [`getAngularLib`](#upgrade-static) | v8 | v11 |
| `@angular/upgrade` | [`setAngularLib`](#upgrade-static) | v8 | v11 |
| polyfills | [reflect-metadata](#reflect-metadata) | v8 | v11 |
| template syntax | [`<template>`](#template-tag) | v7 | v11 |
### Deprecated features that can be removed in v12 or later
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/core/testing` | [`TestBed.get`](#testing) | v9 | v12 |
| `@angular/core/testing` | [`async`](#testing) | v9 | v12 |
### Deprecated features that can be removed in v14 or later
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/forms` | [`FormBuilder.group` legacy options parameter](api/forms/FormBuilder#group) | v11 | v14 |
### Deprecated features that can be removed in v15 or later
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/common/http` | [`XhrFactory`](api/common/http/XhrFactory) | v12 | v15 |
| `@angular/compiler-cli` | [Input setter coercion](#input-setter-coercion) | v13 | v15 |
| `@angular/compiler-cli` | [`fullTemplateTypeCheck`](#full-template-type-check) | v13 | v15 |
| `@angular/core` | [Factory-based signature of `ApplicationRef.bootstrap`](#core) | v13 | v15 |
| `@angular/core` | [`PlatformRef.bootstrapModuleFactory`](#core) | v13 | v15 |
| `@angular/core` | [Factory-based signature of `ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent) | v13 | v15 |
| `@angular/platform-server` | [`renderModuleFactory`](#platform-server) | v13 | v15 |
| `@angular/upgrade` | [Factory-based signature of `downgradeModule`](#upgrade-static) | v13 | v15 |
| template syntax | [`bind-`, `on-`, `bindon-`, and `ref-`](#bind-syntax) | v13 | v15 |
### Deprecated features that can be removed in v16 or later
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/common/http/testing` | [`TestRequest` accepting `ErrorEvent` for error simulation](#testrequest-errorevent) | v13 | v16 |
| `@angular/core` | [`getModuleFactory`](#core) | v13 | v16 |
| `@angular/core` | [`ModuleWithComponentFactories`](#core) | v13 | v16 |
| `@angular/core` | [`Compiler`](#core) | v13 | v16 |
| `@angular/core` | [`CompilerFactory`](#core) | v13 | v16 |
| `@angular/core` | [`NgModuleFactory`](#core) | v13 | v16 |
| `@angular/core` | [`ComponentFactory`](#core) | v13 | v16 |
| `@angular/core` | [`ComponentFactoryResolver`](#core) | v13 | v16 |
| `@angular/core` | [`CompilerOptions.useJit and CompilerOptions.missingTranslation config options`](#core) | v13 | v16 |
| `@angular/platform-browser` | [`BrowserTransferStateModule`](#platform-browser) | v14 | v16 |
| `@angular/platform-browser-dynamic` | [`JitCompilerFactory`](#platform-browser-dynamic) | v13 | v16 |
| `@angular/platform-browser-dynamic` | [`RESOURCE_CACHE_PROVIDER`](#platform-browser-dynamic) | v13 | v16 |
| `@angular/platform-server` | [`ServerTransferStateModule`](#platform-server) | v14 | v16 |
| `@angular/router` | [`relativeLinkResolution`](#relativeLinkResolution) | v14 | v16 |
| `@angular/router` | [`resolver` argument in `RouterOutletContract.activateWith`](#router) | v14 | v16 |
| `@angular/router` | [`resolver` field of the `OutletContext` class](#router) | v14 | v16 |
| `@angular/service-worker` | [`SwUpdate#activated`](api/service-worker/SwUpdate#activated) | v13 | v16 |
| `@angular/service-worker` | [`SwUpdate#available`](api/service-worker/SwUpdate#available) | v13 | v16 |
### Deprecated features that can be removed in v17 or later
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| `@angular/common` | [`NgComponentOutlet.ngComponentOutletNgModuleFactory`](#common) | v14 | v17 |
| `@angular/common` | [`DatePipe` - `DATE_PIPE_DEFAULT_TIMEZONE`](api/common/DATE_PIPE_DEFAULT_TIMEZONE) | v15 | v17 |
| `@angular/core` | NgModule and `'any'` options for [`providedIn`](#core) | v15 | v17 |
| `@angular/router` | [`RouterLinkWithHref` directive](#router) | v15 | v17 |
### Deprecated features with no planned removal version
| Area | API or Feature | Deprecated in | May be removed in |
|:--- |:--- |:--- |:--- |
| template syntax | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector) | v7 | unspecified |
For information about Angular Component Development Kit (CDK) and Angular Material deprecations, see the [changelog](https://github.com/angular/components/blob/main/CHANGELOG.md).
## Deprecated APIs
This section contains a complete list all of the currently-deprecated APIs, with details to help you plan your migration to a replacement.
This section contains a complete list all deprecated APIs, with details to help you plan your migration to a replacement.
<div class="alert is-helpful">
@ -111,7 +141,7 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
| API | Replacement | Deprecation announced | Details |
|:--- |:--- |:--- |:--- |
| [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | `{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}` | v9 | From v11 the default code will be extracted from the locale data given by `LOCALE_ID`, rather than `USD`. |
| [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | `{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}` | v9 | From v11 the default code is extracted from the locale data given by `LOCALE_ID`, rather than `USD`. |
| [`NgComponentOutlet.ngComponentOutletNgModuleFactory`](api/common/NgComponentOutlet) | `NgComponentOutlet.ngComponentOutletNgModule` | v14 | Use the `ngComponentOutletNgModule` input instead. This input doesn't require resolving NgModule factory. |
| [`DatePipe` - `DATE_PIPE_DEFAULT_TIMEZONE`](api/common/DATE_PIPE_DEFAULT_TIMEZONE) |`{ provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '-1200' }` | v15 | Use the `DATE_PIPE_DEFAULT_OPTIONS` injection token, which can configure multiple settings at once instead. |
@ -135,9 +165,9 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
| [`defineInjectable`](api/core/defineInjectable) | `ɵɵdefineInjectable` | v8 | Used only in generated code. No source code should depend on this API. |
| [`entryComponents`](api/core/NgModule#entryComponents) | none | v9 | See [`entryComponents`](#entryComponents) |
| [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | none | v9 | See [`ANALYZE_FOR_ENTRY_COMPONENTS`](#entryComponents) |
| [`async`](api/core/testing/async) | [`waitForAsync`](api/core/testing/waitForAsync) | v11 | The [`async`](api/core/testing/async) function from `@angular/core/testing` has been renamed to `waitForAsync` in order to avoid confusion with the native JavaScript `async` syntax. The existing function is deprecated and will be removed in a future version. |
| [`async`](api/core/testing/async) | [`waitForAsync`](api/core/testing/waitForAsync) | v11 | The [`async`](api/core/testing/async) function from `@angular/core/testing` has been renamed to `waitForAsync` in order to avoid confusion with the native JavaScript `async` syntax. The existing function is deprecated and can be removed in a future version. |
| [`getModuleFactory`](api/core/getModuleFactory) | [`getNgModuleById`](api/core/getNgModuleById) | v13 | Ivy allows working with NgModule classes directly, without retrieving corresponding factories. |
| `ViewChildren.emitDistinctChangesOnly` / `ContentChildren.emitDistinctChangesOnly` | none \(was part of [issue #40091](https://github.com/angular/angular/issues/40091)\) | | This is a temporary flag introduced as part of bugfix of [issue #40091](https://github.com/angular/angular/issues/40091) and will be removed. |
| `ViewChildren.emitDistinctChangesOnly` / `ContentChildren.emitDistinctChangesOnly` | none \(was part of [issue #40091](https://github.com/angular/angular/issues/40091)\) | | This is a temporary flag introduced as part of bug fix of [issue #40091](https://github.com/angular/angular/issues/40091) and will be removed. |
| Factory-based signature of [`ApplicationRef.bootstrap`](api/core/ApplicationRef#bootstrap) | Type-based signature of [`ApplicationRef.bootstrap`](api/core/ApplicationRef#bootstrap) | v13 | With Ivy, there is no need to resolve Component factory and Component Type can be provided directly. |
| [`PlatformRef.bootstrapModuleFactory`](api/core/PlatformRef#bootstrapModuleFactory) | [`PlatformRef.bootstrapModule`](api/core/PlatformRef#bootstrapModule) | v13 | With Ivy, there is no need to resolve NgModule factory and NgModule Type can be provided directly. |
| [`ModuleWithComponentFactories`](api/core/ModuleWithComponentFactories) | none | v13 | Ivy JIT mode doesn't require accessing this symbol. See [JIT API changes due to ViewEngine deprecation](#jit-api-changes) for additional context. |
@ -172,7 +202,6 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
| [`provideRoutes` function](api/router/provideRoutes) | Use `ROUTES` `InjectionToken` instead. | v15 | The `provideRoutes` helper function is minimally useful and can be unintentionally used instead of `provideRouter` due to similar spelling. |
| [`setupTestingRouter` function](api/router/testing/setupTestingRouter) | Use `provideRouter` or `RouterTestingModule` instead. | v15.1 | The `setupTestingRouter` function is not necessary. The `Router` is initialized based on the DI configuration in tests as it would be in production. |
<a id="platform-browser"></a>
### &commat;angular/platform-browser
@ -181,7 +210,6 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
|:--- |:--- |:--- |:--- |
| [`BrowserTransferStateModule`](api/platform-browser/BrowserTransferStateModule) | No replacement needed. | v14.1 | The `TransferState` class is available for injection without importing additional modules on the client side of a server-rendered application. |
<a id="platform-browser-dynamic"></a>
### &commat;angular/platform-browser-dynamic
@ -200,7 +228,6 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
| [`renderModuleFactory`](api/platform-server/renderModuleFactory) | [`renderModule`](api/platform-server/renderModule) | v13 | This symbol is no longer necessary. See [JIT API changes due to ViewEngine deprecation](#jit-api-changes) for additional context. |
| [`ServerTransferStateModule`](api/platform-server/ServerTransferStateModule) | No replacement needed. | v14.1 | The `TransferState` class is available for injection without importing additional modules during server side rendering, when `ServerModule` is imported or `renderApplication` function is used for bootstrap. |
<a id="forms"></a>
### &commat;angular/forms
@ -241,7 +268,7 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
## Deprecated features
This section lists all of the currently-deprecated features, which includes template syntax, configuration options, and any other deprecations not listed in the [Deprecated APIs](#deprecated-apis) section above.
This section lists all deprecated features, which includes template syntax, configuration options, and any other deprecations not listed in the [Deprecated APIs](#deprecated-apis) section.
It also includes deprecated API usage scenarios or API combinations, to augment the information above.
<a id="bazelbuilder"></a>
@ -265,7 +292,7 @@ As a result, the integration was deprecated in Angular version 8, and due to no
### `/deep/`, `>>>`, and `::ng-deep` component style selectors
The shadow-dom-piercing descendant combinator is deprecated and support is being [removed from major browsers and tools](https://developers.google.com/web/updates/2017/10/remove-shadow-piercing).
As such, in v4 we deprecated support in Angular for all three of `/deep/`, `>>>`, and `::ng-deep`.
As such, in v4, Angular's support for `/deep/`, `>>>`, and `::ng-deep` was deprecated.
Until removal, `::ng-deep` is preferred for broader compatibility with the tools.
For more information, see [/deep/, >>>, and ::ng-deep](guide/component-styles#deprecated-deep--and-ng-deep "Component Styles guide, Deprecated deep and ngdeep") in the Component Styles guide.
@ -287,15 +314,15 @@ Templates should use the more widely documented syntaxes for binding and referen
### `<template>` tag
The `<template>` tag was deprecated in v4 to avoid colliding with the DOM's element of the same name \(such as when using web components\).
The `<template>` tag was deprecated in v4 to avoid colliding with a DOM element of the same name \(such as when using web components\).
Use `<ng-template>` instead.
For more information, see the [Ahead-of-Time Compilation](guide/aot-compiler) guide.
<a id="ngmodel-reactive"></a>
### ngModel with reactive forms
### `ngModel` with reactive forms
Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and will be removed in a future version of Angular.
Support for using the `ngModel` input property and `ngModelChange` event with reactive form directives has been deprecated in Angular v6 and can be removed in a future version of Angular.
Now deprecated:
@ -306,12 +333,12 @@ Now deprecated:
This support was deprecated for several reasons.
First, developers found this pattern confusing.
It seems like the actual `ngModel` directive is being used, but in fact it's an input/output property named `ngModel` on the reactive form directive that approximates some, but not all, of the directive's behavior.
It allows getting and setting a value and intercepting value events, but some of `ngModel`'s other features, such as delaying updates with`ngModelOptions` or exporting the directive, don't work.
It allows getting and setting a value and intercepting value events, but some `ngModel` features, such as delaying updates with`ngModelOptions` or exporting the directive, don't work.
In addition, this pattern mixes template-driven and reactive forms strategies, which prevents taking advantage of the full benefits of either strategy.
Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in the class removes the convenience of defining forms in the template.
To update your code before support is removed, you'll want to decide whether to stick with reactive form directives \(and get/set values using reactive forms patterns\) or switch to template-driven directives.
To update your code before support is removed, decide whether to stick with reactive form directives \(and get/set values using reactive forms patterns\) or switch to template-driven directives.
**After** \(choice 1 - use reactive forms\):
@ -325,7 +352,7 @@ To update your code before support is removed, you'll want to decide whether to
<code-example path="deprecation-guide/src/app/app.component.ts" region="template-driven-form-example"></code-example>
By default, when you use this pattern, you will see a deprecation warning once in dev mode.
By default, when you use this pattern, you get a deprecation warning once in dev mode.
You can choose to silence this warning by configuring `ReactiveFormsModule` at import time:
<code-example path="deprecation-guide/src/app/app.module.ts" region="reactive-form-no-warning"></code-example>
@ -335,7 +362,7 @@ This may help to track down where in the code the pattern is being used as the c
<a id="reflectiveinjector"></a>
### ReflectiveInjector
### `ReflectiveInjector`
In version 5, Angular replaced the `ReflectiveInjector` with the `StaticInjector`.
The injector no longer requires the Reflect polyfill, reducing application size for most developers.
@ -358,10 +385,10 @@ A dev mode warning was added in v14 to warn if a created `UrlTree` relies on the
<a id="loadChildren"></a>
### loadChildren string syntax
### `loadChildren` string syntax
When Angular first introduced lazy routes, there wasn't browser support for dynamically loading additional JavaScript.
Angular created our own scheme using the syntax `loadChildren: './lazy/lazy.module#LazyModule'` and built tooling to support it.
Angular created its own scheme using the syntax `loadChildren: './lazy/lazy.module#LazyModule'` and built tooling to support it.
Now that ECMAScript dynamic import is supported in many browsers, Angular is moving toward this new syntax.
In version 8, the string syntax for the [`loadChildren`](api/router/LoadChildren) route specification was deprecated, in favor of new syntax that uses `import()` syntax.
@ -397,7 +424,7 @@ These restrictions will be relaxed with the release of Ivy since it'll no longer
Angular applications, and specifically applications that relied on the JIT compiler, used to require a polyfill for the [reflect-metadata](https://github.com/rbuckton/reflect-metadata) APIs.
The need for this polyfill was removed in Angular version 8.0 \([see #14473](https://github.com/angular/angular-cli/pull/14473)\), rendering the presence of the polyfill 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.
Because the polyfill can be depended on by third-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.
In a typical Angular project, the polyfill is not used in production builds, so removing it should not impact production applications.
@ -441,7 +468,7 @@ In a future version, we will throw to indicate that the write is not supported.
### Binding to `innerText` in `platform-server`
[Domino](https://github.com/fgnass/domino), which is used in server-side rendering, doesn't support `innerText`, so in platform-server's "domino adapter", there was special code to fall back to `textContent` if you tried to bind to `innerText`.
[Domino](https://github.com/fgnass/domino), which is used in server-side rendering, doesn't support `innerText`, so in platform-server's *domino adapter*, there was special code to fall back to `textContent` if you tried to bind to `innerText`.
These two properties have subtle differences, so switching to `textContent` under the hood can be surprising to users.
For this reason, we are deprecating this behavior.
@ -504,6 +531,7 @@ For full rationale and discussion behind this deprecation, see [RFC: Internet Ex
IE11 will be supported in Angular v12 LTS releases through November 2022.
</div>
-->
<a id="input-setter-coercion"></a>

2
aio/content/guide/update-to-latest-version.md → aio/content/guide/update-to-version-14.md
View file

@ -1,4 +1,4 @@
# Update Angular
# Update Angular to v14
This guide contains information to update to Angular version 14.

212
aio/content/guide/update-to-version-15.md Normal file
View file

@ -0,0 +1,212 @@
# Update Angular to v15
<!-- NOTE to writers: When creating the topic for the next version, -->
<!-- remember to update the redirect link in angular/aio/firebase.json -->
<!-- To update the redirect link in angular/aio/firebase.json: -->
<!-- 1. Search for the entry in firebase.json with "source": "guide/update-to-latest-version" -->
<!-- 2, Update the destination value to refer to the new guide's URL -->
<!-- -->
This topic provides information about updating your Angular applications to Angular version 15.
For a summary of this information and the step-by-step procedure to update your Angular application to v15, see the [Angular Update Guide](https://update.angular.io).
The information in the [Angular Update Guide](https://update.angular.io) and this topic is summarized from these change logs:
* [angular/angular changelog](https://github.com/angular/angular/blob/main/CHANGELOG.md)
* [angular/angular-cli changelog](https://github.com/angular/angular-cli/blob/main/CHANGELOG.md)
* [angular/components changelog](https://github.com/angular/components/blob/main/CHANGELOG.md)
Information about updating Angular applications to v14 is archived at [Update to version 14](/guide/update-to-version-14).
<a id="new-features"></a>
## New features in Angular v15
Angular v15 brings many improvements and new features.
This section only contains some of the innovations in v15.
For a comprehensive list of the new features, see the [Angular blog post on the update to v15](https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8).
<!-- markdownLint-disable MD001 -->
#### Standalone components are stable
The standalone components API lets you build Angular applications without the need to use NgModules. For more information about using these APIs in your next Angular application, see [Standalone components](guide/standalone-components).
#### The `NgOptimizedImage` directive is stable
Adding `NgOptimizedImage` directive to your component or NgModule can help reduce the download time of images in your Angular application. For more information about using the `NgOptimizedImage` directive, see [Getting started with `NgOptimizedImage`](guide/image-directive).
#### Directives can be added to host elements
The directive composition API makes it possible to add directives to host elements, addressing [feature request #8785](https://github.com/angular/angular/issues/8785). Directives let you add behaviors to your components behaviors without using inheritance.
#### Stack traces are more helpful
Angular v15 makes debugging Angular applications easier with cleaner stack traces.
Angular worked with Google Chrome developers to present stack traces that show more of your application's code and less from the libraries it calls.
For more information about the Chrome DevTools and Angular's support for the cleaner stack traces, see [Modern web debugging in Chrome DevTools](https://developer.chrome.com/blog/devtools-modern-web-debugging/).
<!-- vale Angular.Google_Acronyms = NO -->
#### MDC-based components are stable
<!-- vale Angular.Google_Acronyms = YES -->
Many of the components in Angular Material v15 have been refactored to be based on Angular Material Design Components (MDC) for the Web.
The refactored components offer improved accessibility and adherence to the Material Design spec.
For more information about the updated components, see [Migrating to MDC-based Angular Material Components](https://material.angular.io/guide/mdc-migration).
<a id="breaking-changes"></a>
## Breaking changes in Angular v15
These are the aspects of Angular that behave differently in v15 and that might require you to review and refactor parts of your Angular application.
<a id="v15-bc-01"></a>
#### Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x
In v15, Angular no longer supports node.js versions 14.\[15-19\].x or 16.\[10-12\].x. [PR #47730](https://github.com/angular/angular/pull/47730)
<a id="v15-bc-02"></a>
#### Angular v15 supports TypeScript version 4.8 or later
In v15, Angular no longer supports TypeScript versions older than 4.8. [PR #47690](https://github.com/angular/angular/pull/47690)
<a id="v15-bc-03"></a>
#### `@keyframes` name format changes
In v15, `@keyframes` names are prefixed with the component's *scope name*. [PR #42608](https://github.com/angular/angular/pull/42608)
For example, in a component definition whose *scope name* is `host-my-cmp`, a `@keyframes` rule with a name in v14 of:
<code-example language="ts" hideCopy>
@keyframes foo { ... }
</code-example>
becomes in v15:
<code-example language="ts" hideCopy>
@keyframes host-my-cmp_foo { ... }
</code-example>
This change can break any TypeScript or JavaScript code that use the names of `@keyframes` rules.
To accommodate this breaking change, you can:
* Change the component's view encapsulation to `None` or `ShadowDom`.
* Define `@keyframes` rules in global stylesheets, such as `styles.css`.
* Define `@keyframes` rules in your own code.
<a id="v15-bc-05"></a>
#### Invalid constructors for dependency injection can report compilation errors
When a class inherits its constructor from a base class, the compiler can report an error when that constructor cannot be used for dependency injection purposes. [PR #44615](https://github.com/angular/angular/pull/44615)
This can happen:
* When the base class is missing an Angular decorator such as `@Injectable()` or `@Directive()`
* When the constructor contains parameters that do not have an associated token ,such as primitive types like `string`.
These situations used to behave unexpectedly at runtime. For example, a class might be constructed without any of its constructor parameters.
In v15, this is reported as a compilation error.
New errors reported because of this change can be resolved by either:
* Decorating the base class from which the constructor is inherited.
* Adding an explicit constructor to the class for which the error is reported.
<a id="v15-bc-06"></a>
#### `setDisabledState` is always called when a `ControlValueAccessor` is attached
In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. [PR #47576](https://github.com/angular/angular/pull/47576)
You can opt out of this behavior with `FormsModule.withConfig` or `ReactiveFormsModule.withConfig`.
<a id="v15-bc-07"></a>
#### The `canParse` method has been removed
The `canParse` method has been removed from all translation parsers in `@angular/localize/tools`. [PR #47275](https://github.com/angular/angular/pull/47275)
In v15, use `analyze` should instead and the `hint` parameter in the parse methods is mandatory.
<a id="v15-bc-08"></a>
#### The `title` property is required on `ActivatedRouteSnapshot`
In v15, the `title` property is required on [`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot). [PR #47481](https://github.com/angular/angular/pull/47481)
<a id="v15-bc-09"></a>
#### `RouterOutlet` instantiates the component after change detection
Before v15, during navigation, `RouterOutlet` instantiated the component being activated immediately. [PR #46554](https://github.com/angular/angular/pull/46554)
In v15, the component is not instantiated until after change detection runs.
This change could affect tests that do not trigger change detection after a router navigation,
for example, if your component's constructor calls `router.getCurrentNavigation()`.
Less common, this could affect production code that relies on the exact timing of component availability.
<a id="v15-bc-10"></a>
#### `relativeLinkResolution` is not configurable in the Router
In v15, `relativeLinkResolution` is not configurable in the Router. [PR #47623](https://github.com/angular/angular/pull/47623)
In previous versions, this option was used to opt out of a bug fix.
<a id="v15-bc-04"></a>
#### Angular compiler option `enableIvy` has been removed
The Angular compiler option `enableIvy` has been removed because Ivy is Angular's only rendering engine. [PR #47346](https://github.com/angular/angular/pull/47346)
<a id="v15-bc-10"></a>
#### Angular Material components based on MDC
In Angular Material v15, many components have been refactored to be based on the official Material Design Components for Web (MDC).
For information about breaking changes in Material components v15, see [Migrating to MDC-based Angular Material Components](https://material.angular.io/guide/mdc-migration).
<a id="v15-bc-11"></a>
#### Hardening attribute and property binding rules for `<iframe>` elements
Existing `<iframe>` instances might have security-sensitive attributes applied to them as an attribute or property binding.
These security-sensitive attributes can occur in a template or in a directive's host bindings.
Such occurrences require an update to ensure compliance with the new and stricter rules about `<iframe>` bindings.
For more information, see [the error page](/errors/NG0910).
<a id="deprecations"></a>
## Deprecations in Angular v15
These are the aspects of Angular that are being phased out.
They are still available in v15, but they can be removed in future versions as Angular's [deprecation practices](/guide/releases#deprecation-practices) describe.
To maintain the reliability of your Angular application, review these notes and update your application as soon as practicable.
| Removed | Replacement | Details |
| :--- | :--- |:--- |
| <a id="v15-dp-01"></a>`DATE_PIPE_DEFAULT_TIMEZONE`](api/common/DATE_PIPE_DEFAULT_TIMEZONE) | [`DATE_PIPE_DEFAULT_OPTIONS`](api/common/DATE_PIPE_DEFAULT_OPTIONS) | The `timezone` field in `DATE_PIPE_DEFAULT_OPTIONS` defines the time zone.<br>[PR #43611](https://github.com/angular/angular/pull/43611) |
| <a id="v15-dp-02"></a>[`Injector.get()`](api/core/Injector#get) with the `InjectFlags` parameter | [`Injector.get()`](api/core/Injector#get) with the `InjectOptions` object | [PR #41592](https://github.com/angular/angular/pull/41592) |
| <a id="v15-dp-03"></a>[`TestBed.inject()`](api/core/testing/TestBed#inject) with the `InjectFlags` parameter | [`TestBed.inject()`](api/core/testing/TestBed#inject) with the `InjectOptions` object.| [PR #46761](https://github.com/angular/angular/pull/46761) |
| <a id="v15-dp-04"></a>`providedIn: NgModule` for [`@Injectable`](api/core/Injectable) and [`InjectionToken`](api/core/InjectionToken)<br><a id="v15-dp-05"></a>`providedIn: 'any'` for an `@Injectable` or `InjectionToken` | See Details | `providedIn: NgModule` was intended to be a tree-shakable alternative to `NgModule` providers. It does not have wide usage and is often used incorrectly in cases where `providedIn: 'root'` would be preferred. If providers must be scoped to a specific [`NgModule`](api/core/NgModule), use `NgModule.providers` instead. [PR #47616](https://github.com/angular/angular/pull/47616)|
| <a id="v15-dp-06"></a>[`RouterLinkWithHref`](api/router/RouterLinkWithHref) directive | [`RouterLink`](api/router/RouterLink) directive | The `RouterLink` directive contains the code from the `RouterLinkWithHref` directive to handle elements with `href` attributes. [PR #47630](https://github.com/angular/angular/pull/47630), [PR #47599](https://github.com/angular/angular/pull/47599)|
For information about deprecations in Material components v15, see [Migrating to MDC-based Angular Material Components](https://material.angular.io/guide/mdc-migration).
@reviewed 2022-11-15

18
aio/content/navigation.json
View file

@ -859,29 +859,29 @@
]
},
{
"title": "Release Information",
"title": "Updates and releases",
"tooltip": "Angular release practices, updating, and upgrading.",
"children": [
{
"url": "guide/releases",
"title": "Release practices",
"tooltip": "Angular versioning, release, support, and deprecation policies and practices."
"url": "guide/update-to-version-15",
"title": "Update Angular to the latest version",
"tooltip": "Update your Angular application to the latest version."
},
{
"url": "guide/roadmap",
"title": "Roadmap",
"tooltip": "Roadmap of the Angular team."
},
{
"url": "guide/releases",
"title": "Release practices",
"tooltip": "Angular versioning, release, support, and deprecation policies and practices."
},
{
"url": "guide/browser-support",
"title": "Browser support",
"tooltip": "Browser support and polyfills guide."
},
{
"url": "guide/update-to-latest-version",
"title": "Update to version 14",
"tooltip": "Support to update your application to version 14"
},
{
"url": "guide/deprecations",
"title": "Deprecations",

10
aio/firebase.json
View file

@ -78,9 +78,17 @@
{"type": 301, "source": "/guide/ivy", "destination": "https://v12.angular.io/guide/ivy"},
{"type": 301, "source": "/guide/updating-to-version-10", "destination": "https://v10.angular.io/guide/updating-to-version-10"},
{"type": 301, "source": "/guide/updating-to-version-11", "destination": "https://v11.angular.io/guide/updating-to-version-11"},
{"type": 301, "source": "/guide/updating-to-version-12", "destination": "/guide/update-to-latest-version"},
{"type": 301, "source": "/guide/updating-to-version-12", "destination": "https://v12.angular.io/guide/updating-to-version-12"},
{"type": 301, "source": "/guide/updating-to-version-13", "destination": "https://v13.angular.io/guide/update-to-latest-version"},
{"type": 301, "source": "/guide/set-document-title", "destination": "/guide/router#setting-the-page-title"},
// Update Angular guide refactor to name individual update topics.
// This redirects the generic link to the current version's topic.
// The destination value must be updated with each new major version.
// When changing this value, be sure to update or add the corresponding
// test in angular/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt
{"type": 301, "source": "/guide/update-to-latest-version", "destination": "/guide/update-to-version-15"},
// Renaming of Getting Started topics
{"type": 301, "source": "/start/data", "destination": "/start/start-data"},
{"type": 301, "source": "/start/deployment", "destination": "/start/start-deployment"},

4
aio/tests/deployment/shared/URLS_TO_REDIRECT.txt
View file

@ -214,9 +214,11 @@
/guide/service-worker-configref --> /guide/service-worker-config
/guide/setup --> /guide/setup-local
/guide/setup-systemjs-anatomy --> /guide/file-structure
/guide/update-to-latest-version --> /guide/update-to-version-15
/guide/updating-to-version-10 --> https://v10.angular.io/guide/updating-to-version-10
/guide/updating-to-version-11 --> https://v11.angular.io/guide/updating-to-version-11
/guide/updating-to-version-12 --> /guide/update-to-latest-version
/guide/updating-to-version-12 --> https://v12.angular.io/guide/updating-to-version-12
/guide/updating-to-version-13 --> https://v13.angular.io/guide/update-to-latest-version
/guide/set-document-title --> /guide/router#setting-the-page-title
/guide/webpack --> https://v5.angular.io/guide/webpack
/index.html?foo=bar --> /?foo=bar