105 lines
8.3 KiB
Markdown
105 lines
8.3 KiB
Markdown
|
# 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>
|