如何调试 Angular 通用？

Posted 2023-02-19

【中文标题】如何调试 Angular 通用？

【英文标题】：How to debug Angular universal?

【发布时间】：2018-08-11 04:50:44

【问题描述】：

我正在使用Angular Universal Starter 回购。在 Angular 4 Universal for s-s-r 中，我们可以在开发模式下调试浏览器和应用程序的节点部分（参见控制台），但现在我看不到调试节点部分的方法。我尝试执行 ts-node server.ts 并进行一些更改（文件路径等），但 angular 似乎需要 aot 编译的应用程序和

抛出错误：你必须传入一个 NgModule 或 NgModuleFactory 才能被 引导。

来自文档：

开发（仅客户端呈现） - 运行 npm run start 这将启动 ng serve

生产（也用于测试 s-s-r/本地预渲染） - npm run build:s-s-r && npm run serve:s-s-r

乍一看，在开发中的 Node.js 上调试不起作用。至少从盒子里。可能有人解决了这个问题。

【问题讨论】：

是否可以使用服务来代替 Universal 的繁重工作量？无论如何，Google bot 现在应该可以很好地呈现 SPA：webmasters.googleblog.com/2019/05/…

也许构建应用并手动执行node --inspect。

【参考方案1】：

我觉得这小段代码可以帮到你

创建项目

ng n debuggable-universal-server --interactive=false

cd debuggable-universal-server

添加通用

ng add @nguniversal/express-engine --clientProject debuggable-universal-server

【参考方案2】：

要创建服务器端应用模块 app.server.module.ts，请运行以下 CLI 命令。

ng add @nguniversal/express-engine

要开始在本地系统上使用 Universal 渲染您的应用，请使用以下命令。

npm run dev:s-s-r

【参考方案3】：

您无法在浏览器中调试 Angular 4 应用程序的节点部分。节点在服务器部分工作，因此您无法在浏览器（客户端）中看到它。

从ts-node server.ts 启动时，调试此部分的唯一方法是使用 WebStorm 等外部工具。如果您从 Debug mode 以 TS 模式启动应用程序，则可以使用此工具的所有功能。

【讨论】：

正如我所说，我们无法调试节点部分，因为在开发应用程序中根本没有使用节点部分（仅客户端渲染）

但是你总是可以在开发模式下启动s-s-r应用并调试它。