If click on inspect button in Chrome getting the 404: warning messages in the Visual Studio Code terminal

Question

While working on Angular testing when I enter the ng test command in the terminal, I'm able to run my test cases successfully and the window with http://localhost:9876/ is also opening with my test case, but if I click on the inspect button in Chrome, I'm getting these warning messages - how to fix this issue?

06 12 2018 13:24:33.458:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/takeUntil.js.map
06 12 2018 13:24:33.461:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/takeWhile.js.map
06 12 2018 13:24:33.462:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/throttle.js.map
06 12 2018 13:24:33.556:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/throttleTime.js.map
06 12 2018 13:24:33.568:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/timeInterval.js.map
06 12 2018 13:24:33.569:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/timeout.js.map
06 12 2018 13:24:33.573:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/timeoutWith.js.map
06 12 2018 13:24:33.576:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/timestamp.js.map
06 12 2018 13:24:33.578:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/toArray.js.map
06 12 2018 13:24:33.581:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/window.js.map
06 12 2018 13:24:33.585:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/windowCount.js.map
06 12 2018 13:24:33.586:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/windowTime.js.map
06 12 2018 13:24:33.587:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/windowToggle.js.map
06 12 2018 13:24:33.590:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/windowWhen.js.map
06 12 2018 13:24:33.594:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/withLatestFrom.js.map
06 12 2018 13:24:33.595:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/zip.js.map
06 12 2018 13:24:33.598:WARN [web-server]: 404: /node_modules/rxjs/_esm5/internal/operators/zipAll.js.map
06 12 2018 13:24:33.608:WARN [web-server]: 404: /node_modules/@angular/platform-browser-dynamic/fesm5/testing.js.map
06 12 2018 13:24:33.624:WARN [web-server]: 404: /node_modules/@angular/platform-browser/fesm5/platform-browser.js.map
06 12 2018 13:24:33.627:WARN [web-server]: 404: /node_modules/@angular/common/fesm5/common.js.map
06 12 2018 13:24:33.628:WARN [web-server]: 404: /node_modules/@angular/compiler/fesm5/compiler.js.map
06 12 2018 13:24:33.629:WARN [web-server]: 404: /node_modules/@angular/compiler/fesm5/testing.js.map
06 12 2018 13:24:33.630:WARN [web-server]: 404: /node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.map
06 12 2018 13:24:33.668:WARN [web-server]: 404: /node_modules/@angular/platform-browser/fesm5/testing.js.map
06 12 2018 13:24:33.671:WARN [web-server]: 404: /node_modules/@angular/forms/fesm5/forms.js.map

Answer 1

This happens because Typescript isn't generating sourcemaps in a test environment, in order to reflect more accurately the prod environment and expect more precise results.

To fix this, run the command with the --source-map flag:

ng test --source-map