fix(@angular-devkit/build-angular): display cleaner errors#22278
Merged
dgp1130 merged 1 commit intoangular:13.0.xfrom Dec 2, 2021
alan-agius4:cherry-pick-22268
Merged
fix(@angular-devkit/build-angular): display cleaner errors#22278dgp1130 merged 1 commit intoangular:13.0.xfrom alan-agius4:cherry-pick-22268
dgp1130 merged 1 commit intoangular:13.0.xfrom
alan-agius4:cherry-pick-22268
Conversation
alan-agius4
added
the
target: patch
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/ **
```
(cherry picked from commit 7408511)
dgp1130
approved these changes
Dec 2, 2021
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Cherry-pick of #22268