The current stable version of `webpack-dev-server` does not fully handle Webpack 5's configuration options. In this case, the `target` option can now be an array. However, the array form is ignored by the dev server which can cause the live reload client code to not be included in the output bundles. To remedy this, the `injectClient` option is used when live reload is enabled which forces the client code to be included regardless of the `target` option.
The GC caching mode will remove any unused cache entries after each rebuild. This prevents old modules from being retained indefinitely during long-lived development sessions.
The Webpack 5 automatic public path support can cause an incorrect public path to be used to load assets and lazy loaded routes. The current logic relies on the last script element found at runtime in the application's index HTML which may not be related to the application scripts. Now if a `deployUrl` is not specified, the Webpack `publicPath` option is defaulted to an empty string which provides equivalent behavior to Webpack 4.
In Webpack 5, the Webpack callback must be used when Webpack is running in watch mode.
Related warning
```
.(node:6565) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
```
Webpack 5 now uses a `chunkHash` hook that is accessible from `JavascriptModulesPlugin.getCompilationHooks()`. The `hashForChunk` hooks have been deprecated in Webpack 5.
TypeScript files had the potential to be processed twice by the build optimizer. This did not affect the output code but could lead to longer production build times. The build optimizer is now configured in one centralized location for both TypeScript and JavaScript files. The Webpack configuration partial for TypeScript support is also reduced to one common function for both AOT and JIT as a result.
While the builders when executed via the Angular CLI and their associated options are considered stable, the programmatic APIs are not considered officially supported and are not subject to the breaking change guarantees of SemVer.
The programmatic APIs for the builders are now explicitly marked as experimental. This allows the package to use a stable versioning scheme while also continuing to provide access to the experimental programmatic API elements of the package.
With the minimum version of Node.js now set to v12, the promise fs API can now be leveraged within the tooling.
This change also uses `copyFile` (with copy-on-write where available) to setup the the service worker files as well a streaming APIs to generate service worker hashes. Both of which improves performance and reduces memory usage.
A new build option named `inlineStyleLanguage` has been introduced that will allow a project to define the stylesheet language used in an application's inline component styles. Inline component styles are styles defined via the `styles` property within the Angular `Component` decorator. Both JIT and AOT mode are supported. However, JIT mode requires that inline styles only be string literals (compile-time partial evaluation is not supported in JIT mode). Currently supported language options are: `CSS` (default), `Sass`, `SCSS`, and `Less`. If the option is not specified, `CSS` will be used and enables existing projects to continue to function as expected.
In some scenarios in Webpack 5 percentage goes from 1 back to 0.99, ex: 0.99 -> 1 -> 0.99 -> 1. This causes the "complete" message to be displayed multiple times.
The internal Webpack configuration now includes support for style rules with MIME type conditions. This allows the data URIs generated for inline component CSS styles by the Angular Webpack plugin to be processed with the same loaders as file based styles.
With this change Webpack 5 is now used by the Angular tooling to build applications. Webpack 4 usage and support has been removed.
No project level configuration changes are required to take advantage of 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.
BREAKING CHANGE: Webpack 5 lazy loaded file name changes
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 and/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.
Example development file name change: `lazy-lazy-module.js` --> `src_app_lazy_lazy_module_ts.js`
BREAKING CHANGE: Webpack 5 web worker support
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.
Web worker usage should be updated as shown below (where `./app.worker` should be replaced with the actual worker name):
Before: `new Worker('./app.worker', ...)`
After: `new Worker(new URL('./app.worker', import.meta.url), ...)`
This change updates the remainder of the non-builder harness tests to use a random port when testing. This change reduces the frequency of test flakes as well as improves the opportunity for parallel test execution.
With the removal of the deprecated ViewEngine-based Webpack plugin, the ivy namespace export that was previously used is now deprecated in favor of direct exports of the Ivy-based plugin.
The default Jasmine test timeout is set to 2.5 minutes for all builder tests. The smaller timeouts (that are now removed from individual tests) can lead to test flakes especially on CI which can have large performance variability.
BREAKING CHANGE:
Removal of deprecated browser and server command options.
- `i18nFile`, use `locales` object in the project metadata instead.
- `i18nFormat`, No longer needed as the format will be determined automatically.
- `i18nLocale`, use `localize` option instead.
BREAKING CHANGE: Removal of deprecated `extract-i18n` command options
The deprecated `i18nLocale` option has been removed and the `i18n.sourceLocale` within a project's configuration should be used instead.
The deprecated `i18nFormat` option has been removed and the `format` option should be used instead.
BREAKING CHANGE: Removal of View Engine support from application builds
With the removal of the deprecated View Engine compiler in Angular version 12 for applications, Ivy-based compilation will always be used when building an application.
The default behavior for applications is to use the Ivy compiler when building and no changes are required for these applications.
For applications that have opted-out of Ivy, a warning will be shown and an Ivy-based build will be attempted. If the build fails,
the application may need to be updated to become Ivy compatible.
BREAKING CHANGE: Removal of View Engine support from i18n extraction
With the removal of the deprecated View Engine compiler in Angular version 12 for applications, the `ng extract-i18n` command will now always use the Ivy compiler.
The `--ivy` option has also been removed as Ivy-based extraction is always enabled.
The default behavior for applications is to use the Ivy compiler for building/extraction and no changes are required for these applications.
For applications that have opted-out of Ivy, a warning will be shown and Ivy-based extraction will be attempted. If the extraction fails,
the application may need to be updated to become Ivy compatible.
This change improves the performance of incremental type checking of Angular templates by reducing the number of calls to retrieve the diagnostics.
Only the set of affected files will be queried on a rebuild. The affected set includes files TypeScript deems affected, files that
are required to be emitted by the Angular compiler, and the original file for any TTC shim file that TypeScript deems affected.
If an error occurs during a build, it is possible that the output path directory may not be present and then cause the stats JSON file write to fail.
Fixes: #20349
