8000 fix(@angular-devkit/build-angular): display cleaner errors · angular-robot/angular-cli@a097f91 · GitHub
[go: up one dir, main page]
Skip to content

Commit a097f91

Browse files
alan-agius4dgp1130
alan-agius4
authored and
dgp1130
committed
fix(@angular-devkit/build-angular): display cleaner errors
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)
1 parent 827b890 commit a097f91

File tree

1 file changed

+6
-1
lines changed
  • packages/angular_devkit/build_angular/src/webpack/configs

1 file changed

+6
-1
lines changed

‎packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ function createIvyPlugin(
9090
export function getTypeScriptConfig(wco: WebpackConfigOptions): Configuration {
9191
const {
9292
buildOptions: { aot = false, main, polyfills },
93+
tsConfig,
9394
tsConfigPath,
9495
} = wco;
9596

@@ -100,8 +101,12 @@ export function getTypeScriptConfig(wco: WebpackConfigOptions): Configuration {
100101
module: {
101102
rules: [
102103
{
103-
test: /\.[jt]sx?$/,
104+
test: tsConfig.options.allowJs ? /\.[tj]sx?$/ : /\.tsx?$/,
104105
loader: AngularWebpackLoaderPath,
106+
// The below are known paths that are not part of the TypeScript compilation even when allowJs is enabled.
107+
exclude: [
108+
/[/\\](?:css-loader|mini-css-extract-plugin|webpack-dev-server|webpack)[/\\]/,
109+
],
105110
},
106111
],
107112
},

0 commit comments

Comments
 (0)
0