When using the `statsJson` browser builder option, the resulting JSON data is now streamed into a file instead of written in one large block. This mitigates crashes due to the generated string exceeded the Node.js limit.
BREAKING CHANGE
`suppressZoneJsIncompatibilityWarning` option has been removed. If you are using this plugin directly and `async/await` in ES2017 make sure you downlevel the async syntax using Babel.
See: https://github.com/angular/zone.js/pull/1140 for more information.
Webpack's `Stats.toJson` function is an expensive operation and is recommended to be avoided where possible. In the case of the karma plugin, the compilation errors can be accessed directly without the need for the function call.
Webpack's Stats.toJson function is an expensive operation and is recommended to be avoided where possible. In the case of the analytics plugin, the chunks and assets can be accessed directly from the Webpack compilation.
This change moves the global script resolution logic to a separate function to aid in reducing the complexity of the Webpack styles configuration partial generation function.
By using Webpack's nested rule and `oneOf` rule support, a large amount of conditional logic and array processing can be removed from the Webpack style configuration generator function.
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.
With this change we add `postcss-preset-env` with stage 3 features. This stage includes support for:
- all property
- break properties
- custom properties
- font-variant property
- gap properties
- media query ranges
See https://preset-env.cssdb.org/features#stage-3
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
Previously `karma-coverage` was validated only when in karma plugins config one of these was added
``'karma-coverage'` or `require('karma-coverage')`
This change will allow cli to validate `karma-coverage` plugin if in `karma.conf.js` `'karma-*'` is used. Example:
```
plugins: [
...
'karma-*',
require('@angular-devkit/build-angular/plugins/karma'),
...
]
```
Fixes#19993
`file-loader` resolves `import/require()` on a file into a url. This is non standard, undocumented, unsupported Webpack specific functionality. This was introduced in the Angular CLI before `postcss-cli-resources` existed and was never removed.
Using `file-loader` and `postcss-cli-resources` are no longer needed with Webpack 5, because of the introduction of [Assets Modules](https://webpack.js.org/guides/asset-modules/).
BREAKING CHANGE:
The unsupported/undocumented, Webpack specific functionality to `import`/`require()` a non-module file has been removed.
Before
```js
import img from './images/asset.png';
```
After
```html
<img src="images/asset.png">
```
With this change we add a new `jitMode` option to the ivy AngularWebpackPlugin.
`readConfiguration` from `@angular/compiler-cli` will use file configuration options over programmaticly supplied options. By using a separate option the options precedence issue can be avoided.
Closes#19949
This feature adds detection of the `tailwindcss` package (https://tailwindcss.com) and provides a mechanism to automatically include support. To enable tailwindcss for a project, two actions must be taken:
1) Install `tailwindcss` into the Angular workspace (`npm install -D tailwindcss`/`yarn add -D tailwindcss`)
2) Create a tailwindcss configuration file (`tailwind.config.js`) in either the workspace root or the project root. A configuration file in the project root takes precedence over one in the workspace root.
When both conditions are met, the Angular CLI will initialize and integrate tailwindcss into the stylesheet build pipeline.
Previously when hashing of media was disabled, if 2 files had the same name. Only one files used to be emitted. With this change we change the behaviour so that both files are emitted.
Closes#12186
This change causes native async functions to be downleveled when an application targets ES2017 within its TypeScript configuration. Any source file that contains the async keyword will be processed including libraries. Since Zone.js does not support native async, this processing allows Zone.js to function with an ES2017 target.
`postcss-loader` version 4.2.0 added an `implementation` option. Using the using will ensure that the correct postcss version is used.
More info: deac9787eeFixes#19839
This change adds the following polyfills for IE11 (`nomodule` browsers):
ES2016:
Array.prototype.includes
ES2017:
Object.entries
Object.values
Object.getOwnPropertyDescriptors
ES2019:
Object.fromEntries
Array.prototype.flat
Array.prototype.flatMap
The newly introduced library linker mode that removes the need for ngcc is integrated into the Angular CLI's build system. This allows libraries that are built in linker mode to be used when building an application.
This change adds internal support for providing a custom file watching mechanism to the browser (and associated) builders. The support integrates and overrides the Webpack watch system when enabled. This is currently intended to support builder unit testing use cases.
This changes the internal Angular Karma plugin's asset fallback middleware to rewrite the request URL directly instead of trying to copy the request properties. With changes in newer Node.js versions, not all request properties may be enumerable.
Fixes: #19644
By configuring the optimizer (`terser`) to be aware that the Angular `forwardRef` helper function is a pure function, the optimizer can completely remove the helper call when the return value is unused.
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
