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.
```
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.
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), ...)`
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.
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.
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
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
