With every build-angular release, previously created cache entries get stale and are no longer used. This causes the cache to keep growing as older files are not purged.
With this change we automatically purge entries that have been created with older version of build-angular and can no longer be used with the current installed version.
Closes#22323
Previously, we enabled the `keepNames` esbuild when mangling was disabled, this caused dead code to be retained because of the transformations that esbuild did to the input.
Input
```js
class foo {}
```
Output
```js
var l = Object.defineProperty,
a = (s, c) => l(s, "name", { value: c, configurable: !0 });
class foo {}
a(foo, "foo");
```
Previously we enabled the `keepNames` esbuild option when mangling was disabled, which is actually not needed to retain the name of symbols but is needed for SSR because Domino relies on the `name` property on functions and classes.
Closes#22354
With this change we enabling Webpack to display additional cache related logs when the `verbose` option is enabled. This is helpful to debug cache misses.
This fixes an issue were in some cases when importing CSS in the compilation using import syntax caused CSS to be extracted which causes a runtime error.
In general this is not something that we fully support since this is a specific webpack features and importing CSS as if they were ES modules not supported by the browsers. However, certain widely using libraries such as Monaco editor depend on this specific Webpack feature.
Note: This non-standard unsupported behaviour will no longer be possible in the next major version.
Closes#22358
Previously, we always consumed the ES2020 entrypoints, which caused issues in environments where the application compilation target is ES2019 or lower and ES2020 is not supported.
This is because we only downlevel code when we target ES5 or below.
- ES5 or below compilations, ES2015 entrypoints are used and their code is downlevelled to ES5.
- ES2019 or below, ES2015 entrypoints are used and no downlevelling is involved.
- ES2020 or later, ES2020 entrypoints are used.
Closes#22270
Previously, we introduced the `ngResource` query to Angular component resources we now use it with `resourceQuery` to differentiate between global and components styles, since in some cases while unlikely a file can be used as a component and global style.
Closes#7245
When `process.versions.webcontainer` is truthy it means that we are running in a StackBlitz webcontainer. `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster. However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass` which in Webpack uses the slower async path.
In some cases we don't ship certain locales, or they map to files which are named only the language IDs. Example `en-US`, which it's locale data is available from `@angular/common/locales/en.mjs`
Closes#22285
* fix(@angular-devkit/build-angular): correctly extract messages when using cached build
Extracted messages are not part of Webpack pipeline and hence they cannot be retrieved from cache. Therefore, we need to mark the extraction loader as non cacheable.
Closes#22264
* fixup! fix(@angular-devkit/build-angular): correctly extract messages when using cached build
Before:
```
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
styles.js | styles | 9.47 kB |
runtime.js | runtime | 4.98 kB |
polyfills.js | polyfills | 1.81 kB |
vendor.js | vendor | 1012 bytes |
main.js | main | 1004 bytes |
| Initial Total | 18.24 kB
Build at: 2021-12-01T15:36:51.797Z - Hash: fe036e992695bafa - Time: 2775ms
./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
./node_modules/css-loader/dist/runtime/sourceMaps.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
./node_modules/webpack-dev-server/client/index.js?protocol=auto%3A&username=&password=&hostname=0.0.0.0&port=0&pathname=%2Fws&logging=info&reconnect=10 - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at processTicksAndRejections (internal/process/task_queues.js:95:5)
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at processTicksAndRejections (internal/process/task_queues.js:95:5)
./src/styles.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at tryRunOrWebpackError (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/HookWebpackError.js:88:9)
at __webpack_require_module__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4979:12)
at __webpack_require__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4936:18)
at Module.<anonymous> (/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/alanagius/cli-reproductions/error-testing/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/alanagius/cli-reproductions/error-testing/src/styles.css:5:109)
at /Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (/Users/alanagius/cli-reproductions/error-testing/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at /Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4981:39
at tryRunOrWebpackError (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4979:12)
at __webpack_require__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4936:18)
-- inner error --
Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at Object.<anonymous> (/Users/alanagius/cli-reproductions/error-testing/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/alanagius/cli-reproductions/error-testing/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[2]!/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/runtime/sourceMaps.js:1:7)
at /Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (/Users/alanagius/cli-reproductions/error-testing/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at /Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4981:39
at tryRunOrWebpackError (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4979:12)
at __webpack_require__ (/Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/Compilation.js:4936:18)
at Module.<anonymous> (/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/alanagius/cli-reproductions/error-testing/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/alanagius/cli-reproductions/error-testing/src/styles.css:5:109)
at /Users/alanagius/cli-reproductions/error-testing/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (/Users/alanagius/cli-reproductions/error-testing/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
Generated code for /Users/alanagius/cli-reproductions/error-testing/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/alanagius/cli-reproductions/error-testing/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[2]!/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/runtime/sourceMaps.js
1 | throw new Error("Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):\nError: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.\n at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34");
Generated code for /Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/alanagius/cli-reproductions/error-testing/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/alanagius/cli-reproductions/error-testing/src/styles.css
1 | __webpack_require__.r(__webpack_exports__);
2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
3 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
4 | /* harmony export */ });
5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/sourceMaps.js */ "/Users/alanagius/cli-reproductions/error-testing/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/alanagius/cli-reproductions/error-testing/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[2]!/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/runtime/sourceMaps.js");
6 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
7 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "/Users/alanagius/cli-reproductions/error-testing/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/alanagius/cli-reproductions/error-testing/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[2]!/Users/alanagius/cli-reproductions/error-testing/node_modules/css-loader/dist/runtime/api.js");
8 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
9 | // Imports
10 |
11 |
12 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
13 | // Module
14 | ___CSS_LOADER_EXPORT___.push([module.id, "/* You can add global styles to this file, and also import other style files */\n", "",{"version":3,"sources":["webpack://./src/styles.css"],"names":[],"mappings":"AAAA,8EAA8E","sourcesContent":["/* You can add global styles to this file, and also import other style files */\n"],"sourceRoot":""}]);
15 | // Exports
16 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
17 |
```
After
```
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
styles.css, styles.js | styles | 212.27 kB |
polyfills.js | polyfills | 211.85 kB |
vendor.js | vendor | 211.02 kB |
runtime.js | runtime | 6.86 kB |
main.js | main | 1004 bytes |
| Initial Total | 642.98 kB
Build at: 2021-12-01T15:45:54.794Z - Hash: 3d8eb5b30e61ed25 - Time: 2883ms
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at processTicksAndRejections (internal/process/task_queues.js:95:5)
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot use a JavaScript or TypeScript file (/Users/alanagius/cli-reproductions/error-testing/src/app/app.component.ts) in a component's styleUrls or templateUrl.
at /Users/alanagius/cli-reproductions/error-testing/node_modules/@ngtools/webpack/src/ivy/loader.js:75:34
at processTicksAndRejections (internal/process/task_queues.js:95:5)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
```
With this change we fix an issue in JIT mode were we try to access an inexistent `default` property of styles modules when emitted in CJS.
Also, we now emit templates modules without the default property when not targeting ES2015 or greater to normalize the how to `require` templates and styles.
Closes#21588
When using i18n with the dev server, the translation files will now be linked as a dependency to any file containing translated text. This allows translation files to be watched and the application to be rebuilt using the changed translation files.
Closes#16341
`remapping` returns a SourceMap object and not a plain object. This causes
Babel to fail with `don't know how to turn this value into a node` when
invoked from `istanbul-lib-instrument` as Babel checks if the value is a
plain object.
See: 780aa48d2a/packages/babel-types/src/converters/valueToNode.ts (L115-L130)
This was previously fixed in commit da1733cc69eeac1417e47df23389da1658850ada
but the fix was lost as part of commit 0c44ab305836abab26dc81d7c962f330898213fd.
When optimizations are enabled (either scripts or styles), an additional column will now be present in the output report shown in the console for an application build. This additonal column will display the estimated transfer size for each file as well as the total initial estimated transfer size for the initial files. The estimated transfer size is determined by calculating the compressed size of the file using brotli's default settings. In a development configuration (a configuration with optimizations disabled), the calculations are not performed to avoid any potential increase in rebuild speed due to the large size of unoptimized files.
Closes: #21394
The `proxyConfig` option for the `dev-server` builder now supports JSON files containing comments and trailing commas.
Several additional tests regarding the use of ESM and CommonJS JavaScript configuration files were also added to reduce the likelihood of future regressions.
Closes: #21862
We now pass the input sourcemap to istanbul babel plugin, since this is used directly by the instrumenter d58c92a7de/src/index.js (L126-L129) and is needed to remapped instrumented code back to the original source.
Previously, the lack of this caused incorrect reports of uncovered and coverage code and also incorrectly mappings in the HTML report.
Closes#22118
esbuild will issue a warning when `@charset` is in the middle of the file. This is caused by css-loader will concats the file and doesn't hoist `@charset`, (https://github.com/webpack-contrib/css-loader/issues/1212).
While, esbuild will issue a warning regarding the above, it will hoist to the very top.
In many cases, this warning is not actionable by the users as the `@charset` would be likely specified in 3rd party libs.
Closes#22097
```
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
```
Closes#22084
There was previously the potential for two workers to complete quickly at the same time which could result in one of the results not being propagated to the remainder of the system. This situation has now been corrected by removing the worker execution at a later point in the process.
(cherry picked from commit 802b1b0378c1816dbfd8f4320b5d69e82f0c7aa6)
With this change we unify most of the webpack configuration into the common configuration. A number of lengthy functions and code portions have been moved into a seperate file to make the configuration easier to follow.
With this change we replace `@jsdevtools/coverage-istanbul-loader` webpack loader with [`babel-plugin-istanbul`](https://github.com/istanbuljs/babel-plugin-istanbul) which is an official Babel plugin by the istanbuljs team.
Previously, when code coverage was enabled we had multiple Babel runs on the same file. This is because istanbuljs' `instrumentSync` and `instrument` APIs which are used by the Webpack plugin invokes Babel directly 66bc39b3c7/packages/istanbul-lib-instrument/src/instrumenter.js (L98)
By using the babel plugin directly, we avoid this which also improves the sourcemaps correctness and test performance.
Closes#22010
This change brings in a security fix causes was causes by an outdated dependency. See https://github.com/GoogleChromeLabs/critters/pull/82 for more information.
Also, remote stylesheets are excluded from processing, were previously this caused build failures.
Closes#20794
