This change is inspired by https://github.com/karma-runner/karma-chrome-launcher/issues/154#issuecomment-986661937 which blocks Karma from launching the browsers until the compilation is complete.
This is needed especially for large applications when using code-coverage where otherwise the users would have to fine-tune several Karma timeouts such as `captureTimeout` for various environments.
Closes#22495
With this change we remove the workaround for fidelity and performance of babel sourcemaps as this is no longer needed as Babel now uses `@ampproject/remapping` to merge sourcemaps.
See https://github.com/babel/babel/pull/14209 for more context.
BREAKING CHANGE:
The deprecated `showCircularDependencies` browser and server builder option has been removed. The recommended method to detect circular dependencies in project code is to use either a lint rule or other external tools.
In some cases unexpected files may be provided which can cause to unsupported or broken behaviour.
One such use-case is users can provide TypeScript files as `scripts` input, this would not be processed by the TypeScript compiler, see: https://github.com/angular/angular-cli/issues/17125 and would cause the build to fail with a an unhelpful error message during optimization as the JS optimizers cannot parse TypeScript input.
BREAKING CHANGE:
`browser` and `karma` builders `script` and `styles` options input files extensions are now validated.
Valid extensions for `scripts` are:
- `.js`
- `.cjs`
- `.mjs`
- `.jsx`
- `.cjsx`
- `.mjsx`
Valid extensions for `styles` are:
- `.css`
- `.less`
- `.sass`
- `.scss`
- `.styl`
This change addresses the `Invalid version: "15.2-15.3"` range error. We previously only handled version ranges for `ios_safari`. Now, we handle such versions for all browsers.
Closes#22606
With this change we update the TypeScript compilation target to `ES2020` for both new and existing projects. This is because all browsers that Angular supports (https://angular.io/guide/browser-support) support `ES2020` features without the need for polyfills.
BREAKING CHANGE:
We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI.
This feature was never truly supported by the Angular CLI, but has as such for visibility.
This package is deprecated and should not be used. It has always been experimental. All the relevant functionality has been moved into `@angular-devkit/build-angular`.
Currently when making a change while serving a localized application, duplicate
translation warnings appear for every translation id. This fixes that by
replacing the whole translation object with a new one each time translations
are loaded.
fixes#22398
When web-workers are enabled we allowing parsing `new URL` syntax which has the side-effect that Webpack will treat all assets as asset modules (https://webpack.js.org/guides/asset-modules/#url-assets). With this change we remove this inconsistency by disabling the `url` parsing which doesn't effect `new Worker(new URL(...))`.
Previously, we used to delete the temporary emitted JS and map files. However this causes a problem in watch mode, as Webpack will not re-emit these deleted files during the next incremental re-build.
With this change we now delete the entire temporary directory when the process is being terminated instead of a file by file bases.
Closes#22395
After the webpack-dev-server migration to v4, the websocket client was always injected, even if not required. This caused unnecessary 'ws' requests when live-reload and hmr were disabled.
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.
