All TypeScript files have been updated to pass the new eslint-based linting checks. eslint compatible disabling comments have also been added in place of the previous tslint comments.
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 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), ...)`
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.
By using the output path provided directly by the Webpack builder's result, one additional reason for using the expensive `Stats.toJson` call is removed.
This change also removes multiple linting disable rule comments now that the output path property is guaranteed to be present.
The `Stats.ToJsonOutput` type is not present in the Webpack 5 typings. There was also a large amount of forced typing in the code to successfully compile.
Minimal Webpack JSON stat types are now used that represent the fields used by the tooling.
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 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.
With updates to the `license-webpack-plugin` and adjustments to the web worker plugin configuration, license extraction can now be used with webpack 5. This change also removes the need to filter out the duplicate asset warning on Webpack 4 that was previously being generated.
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.
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.
As of Angular v11, IE9 and IE10 are no longer officially supported. A warning will now be shown during builds if these browsers are requested in the project's browserslist configuration.
Optimized asset processing was only being performed when differential loading was enabled. This change ensures that the optimized approach is used for non-watch builds. This does not affect `ng serve` usage since it currently requires all application files to be in memory.
Stopping the workers can be a potentially lengthy process with a multi-stage approach based on the state of the worker. This can cause lengthy blocking of the build. This change allows the shutdown to happen in parallel to the remainder of the build.
