如何调试Angular universal？

Question

我正在使用 Angular Universal Starter 回购。在 angular 4 universal for ssr 中，我们可以在开发模式下调试应用程序的浏览器和节点部分（请参阅控制台），但现在我看不到调试节点部分的方法。我尝试执行

ts-node server.ts

并进行一些更改（文件路径等），但角度似乎需要 aot 编译的应用程序和

throw Error: You must pass in a NgModule or NgModuleFactory to be 自举。

来自文档：

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

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

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

Answer 1

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

从

ts-node server.ts

启动时调试此部分的唯一方法是使用 WebStorm 等外部工具。如果您从

Debug mode

以 TS 模式启动应用程序，则可以使用此工具的所有功能。

Answer 2

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

创建项目

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

cd debuggable-universal-server

添加通用

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

Answer 3

以下是调试 Angular Universal 的一些步骤：

确保您已为 Angular 应用程序启用服务器端渲染。您可以通过运行以下命令来执行此操作：

ng add @nguniversal/express-engine

通过运行以下命令构建用于生产的 Angular 应用程序：

ng build --prod

通过运行以下命令启动服务器端渲染进程：

npm run serve:ssr

这将启动服务器并在 http://localhost:4000 上创建您的 Angular 应用程序。然后使用浏览器的开发人员工具检查应用程序的客户端部分。您可以像往常一样使用元素、控制台和网络选项卡来调试您的应用程序。

要调试应用程序的服务器端部分，您可以使用 Node.js 的内置调试工具。为此，使用 --inspect 标志启动服务器：

node --inspect dist/server/main.js

这将启动服务器并使其可用于在端口 9229 上进行调试。 使用 Chrome DevTools 等工具连接到 Node.js 调试器。为此，请打开 Chrome DevTools 并单击“Sources”选项卡。然后单击面板左上角的“Node.js”图标并单击“添加连接”。输入 localhost:9229 作为地址，然后单击“添加”。您现在应该能够使用 Chrome DevTools 调试应用程序的服务器端部分。

请注意，由于服务器端渲染的异步特性，调试服务器端渲染比调试客户端渲染更具挑战性。同样重要的是要记住，服务器端呈现是在请求页面时发生的一次性事件，因此可能需要刷新页面才能看到更改。

Answer 4

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

ng add @nguniversal/express-engine

要开始在本地系统上使用 Universal 呈现您的应用程序，请使用以下命令。

npm run dev:ssr