-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(@angular-devkit/build-angular): display cleaner errors #22268
Conversation
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/ ** ```
@alan-agius4, are we sure we want to limit this to |
@dgp1130, this won’t apply cleanly on the patch branch, I’ll follow up with a patch pR tomorrow. |
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. |
Before:
After