BREAKING CHANGE:
With this change we removed several deprecated builder options
- `extractCss` has been removed from the browser builder. CSS is now always extracted.
- `servePathDefaultWarning` and `hmrWarning` have been removed from the dev-server builder. These options had no effect.
BREAKING CHANGE:
Differential loading support has been removed. With Angular no longer supporting IE11, there are now no browsers officially supported by Angular that require ES5 code. As a result, differential loading's functionality for creating and conditionally loading ES5 and ES2015+ variants of an application is no longer required.
The javascript optimization pipeline is now a two-phase process. `esbuild` is used in the first phase to remove the majority of the unused code and shorten identifiers in each output bundle script. `esbuild` can accomplish this in a fraction of the time that `terser` previously required. However, `esbuild` does not yet implement all of the optimizations that `terser` performs. As a result, `terser` is used as a second phase to further optimize and reduce the size of the output bundle scripts. Since `terser` is operating on a smaller input size, the time required for `terser` to complete is significantly reduced. To further improve performance when source maps are enabled, the source map merging is now performed within the optimization workers. A maximum of four (4) optimization workers are currently used and this value can be adjusted via the `NG_BUILD_MAX_WORKERS` environment variable.
With this change we update to `webpack` to `5.38.1`, this also updates `webpack-sources` to `2.3.0`, The latter is causing OOM errors on our CI, but it in real projects the memory usage only increased by a small fraction. Also, the OOM errors don't manifest themselves when the entire test suit is run locally.
Therefore with this change we also disable sourcemap genertation for most of the browser builds to speed up the tests and reduce memery usage.
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.
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), ...)`
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.
The experimental rollup pass has significant issues with the new Ivy webpack plugin. It also, didn't produce as well as we hoped in real world scenarios infact in many cases this caused build to fail.
REAKING CHANGE:
The experimental rollup pass `--experimental-rollup-pass` option has been removed.
Closes#15836
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
Rebuild tests that involve file watching can be very flaky on CI. This change adds a debounce time which is also used in the other rebuild tests within the package.
BREAKING CHANGE:
Deprecated `rebaseRootRelativeCssUrls` browser builder option has been removed without replacement. This option was used to change root relative URLs in stylesheets to include base HREF and deploy URL and was used only for compatibility and transition as this behavior is non-standard.
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.
The browser builder's `styles` and `scripts` options now support using a package name in the path when specifying a style or script. This removes the need to use a relative path to the node modules directory in these options. This provides support for Yarn PnP as well as reducing the complexity of the options especially for monorepo setups. Relatively located files will take precedence over packages if they exist. This precedence provides backwards compatibility with existing configurations.
Before :
`"styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]`
After:
`"styles": ["bootstrap/dist/css/bootstrap.css"]`
The test was previously run only in Ivy mode but with VE specific test case files. The test now also enables strict templates to ensure template type checking files are properly excluded.
BREAKING CHANGE:
Deprecated `TestLogger` has been removed. Use `logging` API from `'@angular-devkit/core'` instead.
**Note:** this change doesn't effect application developers.
BREAKING CHANGE:
Browser builder `extractCss` option default value has been changed from `false` to `true`. This is to reflect the default behaviour when this deprecated option is removed.
At the moment in AOT mode if a CommonJS dependency has transitive CommonJS dependency we are issue warning for both.
With this change we align the behaviour with JIT mode, where we issue warnings only for direct CommonJS dependencies or ES dependencies which have CommonJS dependencies.
Closes#18526
