Angular 8热切加载模块(包括应用程序模块)没有显示在chrome开发工具中

Question

我对Angular相对陌生，并尝试使用chrome dev工具进行调试。然而，我遇到的问题是，只有懒惰的加载模块显示在文件树(chrome-dev工具的源选项卡(中，而没有急切的加载模块。此外，我在服务器控制台中得到了相当多的404，比如

"GET /runtime.js.map" Error (404): "Not found" 
"GET /es2015-polyfills.js.map" Error (404): "Not found" 
"GET /polyfills.js.map" Error (404): "Not found" 
"GET /main.js.map" Error (404): "Not found"

不确定这些是否相关。

看起来js文件中的sourcepath注释是正确的(例如//# sourceMappingURL=main.js.map(。然而，作为一个从原生js向Angular过渡的应用程序，有两个文件夹包含丑陋的js文件(和映射(。尽管如此，它适用于懒惰加载模块，但不适用于"正常"的热切加载模块。

"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*"
}

欢迎任何有助于我解决此问题的提示/信息。如果需要更多关于设置的信息，请。回来找我。

Angular CLI版本：

Angular CLI: 8.3.23
Node: 10.16.3
OS: linux x64
Angular: undefined
... 
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.23 (cli-only)
@angular-devkit/core         8.3.23 (cli-only)
@angular-devkit/schematics   8.3.23 (cli-only)
@schematics/angular          8.3.23 (cli-only)
@schematics/update           0.803.23 (cli-only)
rxjs                         6.3.3

Answer 1

在同事的帮助下解决了问题。显然是jQuery脚本加载导致了问题。在将其更改为另一个加载选项后(如How do I include a JavaScript file in other JavaScript file？所有TypeScript文件都可以在Chrome开发工具中访问以进行调试(在Webpack文件树下(。

导致问题的代码：

$.getScript('../../path-to/main.js'

修复问题的代码：

function dynamicallyLoadScript(url) {
var script = document.createElement('script'); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
dynamicallyLoadScript('path-to/main.js');