在没有 Webpack 的情况下使用 Angular Universal答案

【问题标题】：Use angular universal without Webpack在没有 Webpack 的情况下使用 Angular Universal
【发布时间】：2020-06-12 13:28:53
【问题描述】：

如何在不将 API 代码与 Webpack 捆绑的情况下使用 Angular Universal？ Webpack 使依赖于原始文件系统设置的后端代码过于复杂。

当我简单地使用tsc 编译应用程序时，它不适用于不使用依赖注入的导入文件。是否有一个 Angular CLI 命令可以在不包含 api 代码的情况下为服务器构建应用程序？我还没找到。

【问题讨论】：

我假设您正在尝试使用@nguniversal/express-engine 设置服务器端渲染。您使用的是什么后端技术？ ASP.NET Core、express.js、Symphony？
为什么webpack在使用universal时会捆绑你的API代码？使用 Angular，webpack 只捆绑运行应用程序所需的文件，而不是 API。除非您在项目中混合了所有内容？
@David 在遵循 angular.io 上的指南时，它添加了一个 server.ts 文件，允许您添加 api 代码。它将它打包到一个 Webpack 包中。
@Pieterjan 我正在使用 express，大部分情况下都可以正常工作。但是 Angular 也捆绑了服务器代码，它不允许使用 fs.readdir，因为不再有文件系统结构。
你不能把你的 API 移到另一个项目吗？还是只是另一个文件并自己编译？否则这可能会有所帮助：github.com/manfredsteyer/ngx-build-plus

标签： angular express webpack angular-universal

【解决方案1】：

我创建了一个类似的模板项目，但使用 ASP.NET 核心：https://github.com/MintPlayer/MintPlayer.AspNetCore.SpaServices.Routing。 https://medium.com/@pieterjandeclippel/server-side-rendering-in-asp-net-core-angular-update-705c0ec01931 提供了一个工作演练。

使用 Express.js 后端，您应该能够执行与演练中类似的操作，唯一不同的是 c# 代码。

在运行ng add 命令（这称为原理图）之后会发生什么，您的 Angular 应用程序会获得一个 main.server.ts，您的 angular.json 会相应地进行修改，并且您的 package.json 会获得一些新命令。

接下来，每次运行 npm run build:ssr 命令时，cli 都会在 /dist/server/main.js 为您的应用程序创建一个新的服务器构建（对于 angular，对于 react/vue，此路径会有所不同）。您的后端技术需要调用此服务器脚本文件，在我的情况下，我通过设置 BootModulePath 在我的 Startup.cs 中配置了它。对于 Express.js 应该有类似的东西。这样，您的服务器端就能够在首次访问时返回服务器端呈现的响应。

正如其他人指出的那样，您应该严格拆分后端（express.js 服务器 api）和前端（您的 Angular 应用程序）。只有一个链接，您可以在其中告诉服务器应用程序在哪里可以找到/dist/server/main.js。

【讨论】：

运行ng add 还添加了一个server.ts 文件，这是一个基本的快速服务器，执行服务器端渲染。该文件还包括一个注释掉的行，建议添加处理/api 请求的代码。我一直在尝试将其用于该项目，而不是添加另一个快速项目。还试图利用已经存在的构建工具。到目前为止还没有运气。将像我在其他项目中那样添加一个单独的快速服务器。