docs: add redirect and update updating-to-v11 to v12 (#41625)

PR Close #41625
This commit is contained in:
Kapunahele Wong 2021-04-08 13:58:41 -04:00 committed by Alex Rickabaugh
parent a4e3ea0311
commit 3a5f006ca6
8 changed files with 117 additions and 81 deletions

View File

@ -1008,7 +1008,7 @@ groups:
'aio/content/guide/migration-localize.md',
'aio/content/guide/migration-module-with-providers.md',
'aio/content/guide/static-query-migration.md',
'aio/content/guide/updating-to-version-11.md',
'aio/content/guide/updating-to-version-12.md',
'aio/content/guide/ivy-compatibility.md',
'aio/content/guide/ivy-compatibility-examples.md'
])

View File

@ -10,7 +10,7 @@ That said, some applications will likely need to apply some manual updates.
If you're seeing errors, first temporarily [turn off Ivy](guide/ivy#opting-out-of-angular-ivy) in your `tsconfig.json` and re-start your app.
If you're still seeing the errors, they are not specific to Ivy. In this case, you may want to consult the [general update guide](guide/updating-to-version-11). If you've opted into any of the new, stricter type-checking settings, you may also want to check out the [template type-checking guide](guide/template-typecheck).
If you're still seeing the errors, they are not specific to Ivy. In this case, you may want to consult the [general update guide](guide/updating-to-version-12). If you've opted into any of the new, stricter type-checking settings, you may also want to check out the [template type-checking guide](guide/template-typecheck).
If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.json` and review the list of expected changes below.

View File

@ -1,73 +0,0 @@
# Updating Angular
This guide contains information related to updating to the latest version of Angular.
## Updating CLI Apps
For step-by-step instructions on how to update to the latest Angular release (and leverage our automated migration tools to do so), use the interactive update guide at [update.angular.io](https://update.angular.io).
## Changes and Deprecations in Version 11
<div class="alert is-helpful">
For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices").
</div>
{@a breaking-changes}
### New Breaking Changes
* Remove deprecated support for IE 9, 10, and IE mobile. See [PR 38931](https://github.com/angular/angular/pull/38931).
* TypeScript 3.9 is no longer supported. Please update to TypeScript 4.0. See [PR 39313](https://github.com/angular/angular/pull/39313).
* `NavigationExtras#preserveQueryParams` has been removed from `@angular/router`. See [PR 38762](https://github.com/angular/angular/pull/38762)
* `CollectionChangeRecord` has been removed from `@angular/core`. See [PR 38668](https://github.com/angular/angular/pull/38668).
* We changed the default value for `relativeLinkResolution` from `'legacy'` to `'corrected'` so that new applications are automatically opted-in to the corrected behavior from [PR 22394](https://github.com/angular/angular/pull/22394). Applications which use the current default are updated by a migration to specify `'legacy'` to ensure the current behavior is maintained when the default is updated. See [PR 25609](https://github.com/angular/angular/pull/25609).
* Fixed a bug in the router where the arguments for `future` and `curr` snapshots were reversed in the call to `shouldReuseRoute` when processing child routes. Usually this ordering mistake doesn't matter because most implementations of [`shouldReuseRoute`](api/router/RouteReuseStrategy#shouldReuseRoute) just do
an equality comparison between `future` and `curr`. However, some implementations actually do rely on values specifically on
one of the two and will need to be updated. See [PR 26949](https://github.com/angular/angular/pull/26949).
* `ViewEncapsulation.Native` has been removed. Angular previously supported a view encapsulation mode `ViewEncapsulaion.Native` that was based on the v0 Shadow DOM Draft APIs. These APIs have been superceded by the final Shadow DOM APIs, which are enabled via `ViewEncapsulation.ShadowDom`. For background information about this change, see [Web Components update: more time to upgrade to v1 APIs](https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade).
* `@angular/platform-webworker` has been removed and will no longer be supported. See [PR 38846](https://github.com/angular/angular/pull/38846).
* `@angular/platform-webworker` is no longer supported. No further versions will be published. See [PR 38846](https://github.com/angular/angular/pull/38846).
* Updated the options for `initialNavigation`. For more information, see [initialNavigation](api/router/InitialNavigation) in the API documentation. See [PR 33128](https://github.com/angular/angular/pull/33128).
* `DatePipe` no longer rounds up fractional milliseconds. See [PR 38009](https://github.com/angular/angular/pull/38009).
* Locale data arrays are now read-only. See [PR 30397](https://github.com/angular/angular/pull/30397).
* The injected `ControlValueAccessor` for `NG_VALUE_ACCESSOR` is now readonly. See [PR 29273](https://github.com/angular/angular/pull/29723).
* The type of `AbstractControl#parent` now indicates that it may be null. See [PR 32671](https://github.com/angular/angular/pull/32671).
* Calling `overrideProvider` before initializing the TestBed will now throw an error. See [PR 38717](https://github.com/angular/angular/pull/38717).
* Types for many Angular built-in pipes have been either narrowed or expanded to be more accurate. For more information, see the corresponding [Pipes](https://angular.io/api?type=pipe) API documentation. See [PR 37447](https://github.com/angular/angular/pull/37447).
* Directives in the `@angular/forms` package used to have `any[]` as a type of validators and asyncValidators
arguments in constructors. Now these arguments are properly typed, so if your code relies on
directive constructor types it may require some updates to improve type safety. See [PR 38994](https://github.com/angular/angular/pull/38944).
* `routerLink` now accepts `undefined` inputs. See [PR 39151](https://github.com/angular/angular/pull/39151).
* The `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. See [PR 37583](https://github.com/angular/angular/pull/37583).
{@a deprecations}
### New Deprecations
| Area | API or Feature | May be removed in |
| ----------------------------- | -------------------------------------------------- | ----------------- |
| `@angular/core/testing` | Rename `async` to `waitForAsync` | <!--v11--> v13 |
{@a removals}
### New Removals of Deprecated APIs
The following APIs have been removed starting with version 11.0.0*:
| Package | API | Replacement | Notes |
| ---------------- | -------------- | ----------- | ----- |
| `@angular/router`| `NavigationExtras#preserveQueryParams` | no action needed | NavigationExtras#preserveQueryParams has been removed from `@angular/router`.|
| `@angular/core` | `CollectionChangeRecord` | no action needed | CollectionChangeRecord has been removed from `@angular/core`.|
| `@angular/core` | `ViewEncapsulation.Native` | no action needed | Angular previously supported a view encapsulation mode `ViewEncapsulaion.Native` that was based on the v0 Shadow DOM Draft APIs. These APIs have been superceeded by the final Shadow DOM APIs, which are enabled via `ViewEncapsulation.ShadowDom`. For background information about this change, see [Web Components update: more time to upgrade to v1 APIs](https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade).|
{@a ivy}
## Ivy features and compatibility
Since version 9, Angular Ivy is the default rendering engine. If you haven't heard of Ivy, you can read more about it in the [Angular Ivy guide](guide/ivy).
* Among other features, Ivy introduces more comprehensive type-checking within templates. For details, see [Template Type-checking](guide/template-typecheck).
* For general guidance on debugging and a list of minor changes associated with Ivy, see the [Ivy compatibility guide](guide/ivy-compatibility).
* For help with opting out of Ivy, see the instructions [here](guide/ivy#opting-out-of-angular-ivy).

View File

@ -0,0 +1,104 @@
# Updating Angular
This guide contains information related to updating to Angular version 12.
## Updating CLI applications
For step-by-step instructions on how to update to the latest Angular release and leverage our automated migration tools to do so, use the interactive update guide at [update.angular.io](https://update.angular.io).
## Building applications with Ivy
For libraries, View Engine is deprecated and will be removed in version 13.
New libraries created with version 12 or later default to Ivy.
For more information about distributing libraries with View Engine and Ivy, see the [Building libraries with Ivy](guide/creating-libraries#ivy-libraries) section of [Creating libraries](guide/creating-libraries).
## Changes and deprecations in version 12
<div class="alert is-helpful">
For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices").
</div>
* Applications can no longer build with View Engine by setting `enableIvy: false`.
Support for building libraries with View Engine, for backwards compatibility, is deprecated and will be removed in Angular version 13.
New libraries created with Angular version 12 will default to building and distributing with Ivy.
For more information, see [Creating Libraries](guide/creating-libraries).
* The Ivy-based IDE [language service](guide/language-service) is now on by default.
See [PR #1279](https://github.com/angular/vscode-ng-language-service/pull/1279).
* Angular's View Engine-based algorithm for generating i18n message IDs is deprecated.
Angular version 12 adds a new flag to `localize-extract` called `--migrateMapFile` which generates a JSON file that can be used to map legacy message IDs to canonical ones.
There is also a new script called `localize-migrate` that can use the mapping file which `localize-extract` generates and migrate all of the IDs in the files that are passed in.
For better stability, if you are using Angular's `i18n`, run this migration to move to the new message ID generation algorithm.
If you don't run this migration, all your generated message IDs will change when Angular removes the View Engine compiler.
See [PR #41026](https://github.com/angular/angular/pull/41026).
* There is now a new build option named `inlineStyleLanguage` for defining the style sheet language in inline component styles.
Currently supported language options are CSS (default), Sass, SCSS, and LESS.
The default of CSS enables existing projects to continue to function as expected.
See [PR #20514](https://github.com/angular/angular-cli/pull/20514).
* For new applications, strict mode is now the default in the CLI.
See [PR #20029](https://github.com/angular/angular-cli/pull/20029).
* Add `emitEvent` option for `AbstractControl` class methods.
See [PR #31031](https://github.com/angular/angular/pull/31031).
* Support `APP_INITIALIZER` to work with observables.
See [PR #31031](https://github.com/angular/angular/pull/31031).
* `HttpClient` supports specifying request metadata.
See [PR #25751](https://github.com/angular/angular/pull/25751).
{@a breaking-changes}
### Breaking changes in Angular version 12
* Add support for TypeScript 4.2.
TypeScript <4.2.3 is no longer supported.
The supported range of TypeScript versions is 4.2.3 to 4.2.x.
See [PR #41158](https://github.com/angular/angular/pull/41158).
* Angular CDK and Angular Material internally now use the new [Sass module system](https://sass-lang.com/blog/the-module-system-is-launched), which is actively maintained by the Sass team at Google.
Consequently, applications can no longer consume Angular CDK/Material's Sass with the [`node-sass` npm package](https://www.npmjs.com/package/node-sass).
`node-sass` is unmaintained and does not support newer Sass features. Instead, applications must use the [`sass` npm package](https://www.npmjs.com/package/sass), or the [`sass-embedded` npm package](https://www.npmjs.com/package/sass-embedded) for the `sass-embedded` beta.
* The Angular tooling now uses Webpack 5 to build applications. Webpack 4 usage and support has been removed.
You don't need to make any project level configuration changes to use the upgraded Webpack version when using the official Angular builders.
Custom builders based on this package that use the experimental programmatic APIs may need to be updated to become compatible with Webpack 5.
See [PR #20466](https://github.com/angular/angular-cli/pull/20466).
* Webpack 5 generates similar but differently named files for lazy-loaded JavaScript files in development configurations when the `namedChunks` option is enabled.
For the majority of users this change should have no effect on the application or build process.
Production builds should also not be affected as the `namedChunks` option is disabled by default in production configurations.
However, if a project's post-build process makes assumptions as to the file names, then adjustments may need to be made to account for the new naming paradigm.
Such post-build processes could include custom file transformations after the build, integration into service-side frameworks, or deployment procedures.
An example of a development file name change is `lazy-lazy-module.js` becoming `src_app_lazy_lazy_module_ts.js`.
See [PR #20466](https://github.com/angular/angular-cli/pull/20466).
* Webpack 5 now includes web worker support.
However, the structure of the URL within the worker constructor must be in a specific format that differs from the current requirement.
To update web worker usage, where `./app.worker` is the actual worker name, change `new Worker('./app.worker', ...)` to `new Worker(new URL('./app.worker', import.meta.url), ...)`.
See [PR #20466](https://github.com/angular/angular-cli/pull/20466).
* Critical CSS inlining is now enabled by default.
To turn this off, set `inlineCritical` to false.
See [PR #20096](https://github.com/angular/angular-cli/pull/20096) and the [Style preprocessor options](guide/workspace-config#optimization-configuration) section of [Angular workspace configuration](guide/workspace-config).
* `ng build` now produces production bundle by default.
See [PR #20128](https://github.com/angular/angular-cli/pull/20128).
* Previously, the Forms module ignored `min` and `max` attributes defined on the `<input type="number">`.
Now these attributes trigger `min` and `max` validation logic in cases where `formControl`, `formControlName`, or `ngModel` directives are also present on a given input.
See [PR #39063](https://github.com/angular/angular/pull/39063).
{@a deprecations}
### New deprecations
* Support for Internet Explorer 11 is deprecated.
See [Deprecated APIs and features](guide/deprecations) and [Microsoft 365 apps say farewell to Internet Explorer 11 and Windows 10 sunsets Microsoft Edge Legacy](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666).
* Sass imports from `@angular/material/theming` are deprecated. There is a new Angular Material Sass API for `@use`.
Run the migration script `ng g @angular/material:themingApi` to switch all your Sass imports for Angular CDK and Angular Material to the new API and `@use`.
* Support for publishing libraries with View Engine has been deprecated:
- You can now compile libraries in [_partial_ compilation mode](guide/angular-compiler-options#compilationmode) to generate Ivy compatible output that will be _linked_ when an application using that library is bundled.
- New libraries you create with the Angular CLI default to partial compilation mode, and do not support View Engine. You can still build a library with View Engine. See [Creating libraries](guide/creating-libraries) for more information.
- Libraries compiled in partial compilation mode will not contain legacy `i18n` message IDs.
If the library was previously compiled by View Engine, and contained legacy `i18n` message IDs, then applications may have translation files that you'll need to migrate to the new message ID format. For more information, see [Migrating legacy localization IDs](guide/migration-legacy-message-id).
- For context, see [Issue #38366](https://github.com/angular/angular/issues/38366).
<div class="alert is-helpful">
Since version 9, Angular Ivy is the default rendering engine.
For more information about Ivy, see [Angular Ivy](guide/ivy).
</div>

View File

@ -651,13 +651,13 @@
"tooltip": "Roadmap of the Angular team."
},
{
"title": "Updating to Version 11",
"tooltip": "Support for updating your application from version 9 to 10.",
"title": "Updating to Version 12",
"tooltip": "Support for updating your application from version 11 to 12.",
"children": [
{
"url": "guide/updating-to-version-11",
"url": "guide/updating-to-version-12",
"title": "Overview",
"tooltip": "Everything you need to know for updating your application from version 10 to 11."
"tooltip": "Everything you need to know for updating your application from version 11 to 12."
},
{
"url": "guide/ivy-compatibility",

View File

@ -32,7 +32,8 @@
{"type": 301, "source": "/getting-started", "destination": "/start"},
{"type": 301, "source": "/getting-started/:rest*", "destination": "/start/:rest*"},
{"type": 301, "source": "/guide/displaying-data", "destination": "/start#template-syntax"},
{"type": 301, "source": "/guide/updating-to-version-10", "destination": "/guide/updating-to-version-11"},
{"type": 301, "source": "/guide/updating-to-version-10", "destination": "https://v11.angular.io/guide/updating-to-version-11"},
{"type": 301, "source": "/guide/updating-to-version-11", "destination": "/guide/updating-to-version-12"},
// Renaming of Getting Started topics
{"type": 301, "source": "/start/data", "destination": "/start/start-data"},

View File

@ -127,6 +127,9 @@
"!/guide/updating-to-version-10",
"!/guide/updating-to-version-10.html",
"!/guide/updating-to-version-10/",
"!/guide/updating-to-version-11",
"!/guide/updating-to-version-11.html",
"!/guide/updating-to-version-11/",
"!/guide/webpack",
"!/guide/webpack.html",
"!/guide/webpack/",

View File

@ -185,7 +185,8 @@
/guide/service-worker-getstart --> /guide/service-worker-getting-started
/guide/service-worker-comm --> /guide/service-worker-communications
/guide/service-worker-configref --> /guide/service-worker-config
/guide/updating-to-version-10 --> /guide/updating-to-version-11
/guide/updating-to-version-10 --> https://v11.angular.io/guide/updating-to-version-11
/guide/updating-to-version-11 --> /guide/updating-to-version-12
/guide/webpack --> https://v5.angular.io/guide/webpack
/news --> https://blog.angular.io/
/news.html --> https://blog.angular.io/