diff --git a/.pullapprove.yml b/.pullapprove.yml index 8597e56609..8a7fce1167 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -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' ]) diff --git a/aio/content/guide/ivy-compatibility.md b/aio/content/guide/ivy-compatibility.md index ed31322831..2193cf40d5 100644 --- a/aio/content/guide/ivy-compatibility.md +++ b/aio/content/guide/ivy-compatibility.md @@ -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. diff --git a/aio/content/guide/updating-to-version-11.md b/aio/content/guide/updating-to-version-11.md deleted file mode 100644 index c5ff4299aa..0000000000 --- a/aio/content/guide/updating-to-version-11.md +++ /dev/null @@ -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 - -
- - For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices"). - -
- -{@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` | 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). diff --git a/aio/content/guide/updating-to-version-12.md b/aio/content/guide/updating-to-version-12.md new file mode 100644 index 0000000000..ab310b2464 --- /dev/null +++ b/aio/content/guide/updating-to-version-12.md @@ -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 + +
+ + For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices"). + +
+ +* 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 ``. + 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). + +
+ +Since version 9, Angular Ivy is the default rendering engine. +For more information about Ivy, see [Angular Ivy](guide/ivy). + +
diff --git a/aio/content/navigation.json b/aio/content/navigation.json index f675de9881..8be40d065b 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -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", diff --git a/aio/firebase.json b/aio/firebase.json index bbf7b2220a..a109b10ebb 100644 --- a/aio/firebase.json +++ b/aio/firebase.json @@ -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"}, diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json index 1231b6dece..8b3c6c987c 100644 --- a/aio/ngsw-config.json +++ b/aio/ngsw-config.json @@ -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/", diff --git a/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt index ed156dc5d8..d20753132b 100644 --- a/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt +++ b/aio/tests/deployment/shared/URLS_TO_REDIRECT.txt @@ -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/