With this change we provide earlier feedback in the console during a build. The setup phase can take some times if the project has a large set of dependencies.
We also move several warnings in the dev-server to an earlier phase so that we don't clutter the progress indicator.
Closes#20957
The new `ngtools/webpack` option leverages the inline resource matching syntax combined with a custom loader instead of data URIs. This provides better resource path in loaders that do not yet fully support scheme-based resource requests.
Loading the postcss-preset-env plugin includes building a mapping of unsupported
browsers by feature, which is somewhat expensive. In large compilations, this mapping
would be recomputed for each postcss-loader instance, as the plugin was recreated
for each loader invocation. By extracting the plugin instance outside of the dynamic
plugin computation, this overhead is avoided.
Since #20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:
```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result: `../C:\\foo\\bar/baz`
```
This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.
This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.
Fixes#20894
With this change we re-emit assets referenced in component stylesheets which where uneffected by the change that re-triggered a re-compilation.
Since we cache the the result of processed component CSS, during a re-compilation `postcss-cli-resources` plugin will not run which causes assets to be to emit. With this change we now cache the asset and re-emit them on every change.
Closes#20882
Since we rely on child compilations to compile components CSS, using the `parallel` option will cause a significant overhead because each compilation will need to spawn a worker, in this mode the worker limit is not be honored because `css-minimizer-webpack-plugin` spawn and calulators workers during the optimization phase of a compilation and not globally per instance hence causes OOM because a large number of workers to be spawned simultaneously.
Closes#20883
As reported in #20113, webpack triggers a Trusted Types violation when
lazy-loading is used. To mitigate that, enable webpack's Trusted Types
module (introduced in webpack/webpack#9856) using 'angular#bundler' as
the policy name.
The Worker constructor option for a transfer list is unfortunately not supported until Node.js 12.17. For Node.js versions prior to 12.17, a manual message post is now used to transfer the necessary initialization data to the Sass workers.
This reduce memory consumption during re-builds.
```
runtime.ba93f81591909b93394f.hot-update.js.map will be removed
styles.ba93f81591909b93394f.hot-update.js.map will be removed
runtime.ba93f81591909b93394f.hot-update.json will be removed
runtime.ba93f81591909b93394f.hot-update.js will be removed
styles.ba93f81591909b93394f.hot-update.js will be removed
```
See https://github.com/webpack/webpack/issues/12947#issuecomment-812108140 and https://github.com/webpack/webpack/issues/13127
A pool of Workers is now used to process Sass render requests. This change allows multiple synchronous render operations to occur at the same time. Sass synchronous render operations can be up to two times faster than the asynchronous variant. The benefit will be most pronounced in applications with large amounts of Sass stylesheets.
The dart-sass Sass implementation will now be executed in a separate worker thread. The wrapper worker implementation provides an interface that can be directly used by Webpack's `sass-loader`.
The worker implementation allows dart-sass to be executed in its synchronous mode which can be up to two times faster than its asynchronous mode. The worker thread also allows Webpack to continue other bundling tasks while the Sass stylesheets are being processed.
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.
Library code inside fesm2015/esm2015/_esm2015 directories has been downlevelled to ES2015 which will not have native async/await. As a result, code from those directories can be skipped from the additional checks as well as the downlevel processing. RxJS uses the `_esm2015` directory naming convention.
With this change we configure `webpack-dev-middleware` and `webpack-dev-server` to print errors to the console, which previously were not displayed. This is because both of these libraries log/emit errors using the logger and the compilation API.
Certain errors such as the one below, were being swallowed during `ng serve`.
```
An unhandled exception occurred: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
/home/circleci/ng/aio/dist/generated/docs/api/router/Routes.json
/home/circleci/ng/aio/dist/generated/docs/api/router/ROUTES.json
```
Tailwind now suppports an environment variable named `TAILWIND_MODE` with possible values of `build` and `watch`. If the variable has not been set, the tooling will now set the variable based on the builder's `watch` option.
