Angular 8 急切加载模块（包括应用程序模块）不会出现在 chrome 开发工具中

Posted 2023-02-16

【中文标题】Angular 8 急切加载模块（包括应用程序模块）不会出现在 chrome 开发工具中

【英文标题】：Angular 8 eager loading modules (incl. app module) do not show up in chrome dev tools

【发布时间】：2020-03-11 22:15:55

【问题描述】：

我对 Angular 比较陌生，并尝试使用 chrome 开发工具进行调试。但是，我遇到了一个问题，即只有延迟加载模块出现在文件树（chrome 开发工具的源选项卡）中，但没有急切加载模块。此外，我在服务器控制台中得到了很多 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 文件中的源路径 cmets 是正确的（例如 //# 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

【参考方案1】：

在同事的帮助下解决了这个问题。显然，jQuery 脚本加载导致了问题。将其更改为另一个加载选项后（如How do I include a javascript file in another 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');