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.
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.
The custom babel loader allows files to be conditionally processed by the i18n inlining transforms based on both file path and content.
By allowing content based checks, the entire parse/transform/print process can be skipped for files that do not contain localizations.
The virtualfs Host was only used for exist and directory checks during asset and file replacement option normalization within the browser and dev-server builders.
This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)
Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.
Example:
```json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"styles": {
"minify": true,
"inlineCritical": true,
}
},
```
To learn more about critical CSS see;
https://web.dev/defer-non-critical-csshttps://web.dev/extract-critical-css/
In a future version of the Angular CLI `inlineCritical` will be enabled by default.
Closes: #17966Closes: #11395Closes: #19445
With this change we set the publicHost to `0.0.0.0:0`, when it's not provided.
This solved issues where previously the publicHost needed to be specified directly to get around `ERR_SSL_PROTOCOL_ERROR` error when proxing https -> http.
NB: this was also the behaviour in version 10 c252968225/packages/angular_devkit/build_angular/src/dev-server/index.ts (L170)Closes#19403
With this change we cleanup the index generation. The `IndexHtmlWebpackPlugin` now extends the base `IndexHtmlGenerator` class which makes it easier to override methods to retrieve compilation assets. This is important for the critical css extraction implementation because Critters needs to access the `assets` from the either the compilation when running in memory or the file-system.
A custom babel preset is introduced to centralize the configuration of babel within the package. Application related presets and plugins are now encapsulated within the custom preset which is used via the Webpack babel-loader. This new custom preset will also provide the integration point for the upcoming Angular linker.
The source locale was intended to be used when building an application; even when not specifically localizing. This includes setting the HTML `lang` attribute, injecting locale data, and setting `LOCALE_ID` within the application.
With this change we remove webpack dev-server logic to a seperate file. We also use the webpack-dev-server API to add live-reload and hmr entry-points and settings.
When using the non-deprecated localization options, the development server was not properly setting the HTML `lang` attribute for the application. This change ensures that the active locale is used within the application's index HTML file.
Closes#18094
This fixes as issue where in some cases the changed module is not accepted which cases the dev-server to fallback to live-reload.
This is because the hmr.js and main.ts have different module ids.
With this change we inline Google fonts and icons in the index html file when optimization is enabled.
**Before**
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
**After**
```html
<style>
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
</style>
```
To opt-out of this feature set `optimization.fonts: false` or `optimization.fonts.inline: false` in the browser builder options.
Example:
```js
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"fonts": false
},
```
More information about the motivation for this feature can be found: https://github.com/angular/angular-cli/issues/18730
Note: internet access is required during the build for this optimization to work.
