如何捆绑 .NetCore API + Angular 前端

Question

我有一个面向公众的角度前端，它与 .NetCore 后端相连接。 这两个项目使用 webpack 捆绑在一起。 问题是，我需要启用服务器端渲染，而微软已弃用/使 UseSpaPrerendering 过时。 我确实遵循了本教程，但它在 .net core 3.0/3.1 中根本无法正常工作。 当我开始工作时，我得到一个 FOUC（未渲染内容的 Flash）并且页面加载速度非常慢。

在上述情况下，如何部署具有服务器端渲染的 .net 核心 API/Angular 前端应用程序？

Answer 1

您是否已经尝试将应用程序部署到 IIS？ 或者，您也可以将 ASPNETCORE_ENVIRONMENT（项目属性 --> 调试 --> ASPNETCORE_ENVIRONMENT = Production）更改为 prod，然后运行应用程序。

现在运行应用程序时不会构建角度包。 为此，您必须从 ClientApp 文件夹运行以下命令（检查您的 csproj 文件，它们就在那里）：

npm run build --prod
npm run build:ssr --prod

现在生成角度构建文件。 如果您在dist/server文件夹旁边看到一个dist/browser文件夹，则该应用程序将不会在生产模式下呈现。 浏览器文件夹的内容应该在服务器文件夹旁边（这是一个已知的错误，但微软将不再更改它）。 如果不是这种情况，您始终可以通过更改 angular.json 文件来解决此问题： projects:ClientApp:architect:build:options:outputPath = dist而不是 dist/browser。 这样，应用程序在开发模式下的行为与生产模式下的行为相同。 “浏览器”文件将始终位于 dist 文件夹中，而 ASP.NET Core 将始终在 dist 文件夹中查找，无论环境设置如何。

在构建了 Angular 服务器/浏览器文件后，您应该能够像往常一样在 prod 模式下运行应用程序。

你能试试这个吗？ 我也会努力的。

更新：

我从https://medium.com/@pieterjandeclippel/server-side-rendering-in-asp-net-core-angular-6df7adacbdaa尝试了我的指南，使用 .NET Core 3.1，它似乎仍然有效。

您可以尝试执行以下步骤吗？：

1. 打开 angular.json 文件，找到projects:ClientApp:architect:build:options:outputPath设置并确保将其设置为dist而不是dist/browser 。 将此设置为 dist 将使应用程序在开发和生产模式下的行为方式相同。
2. （可选）删除 ClientApp 中的 dist 文件夹。

3. 从您的 ClientApp 文件夹运行以下命令： npm run build --prod和npm run build:ssr --prod

4. 打开您的项目属性页面 → 调试选项卡 → 将 ASPNETCORE_ENVIRONMENT 更改为生产

5. F5 运行应用程序

你得到什么结果？ 如果这样的事情不能正常工作，您还可以从“输出”窗口中读取大量信息...

如果这有效，那么您似乎只需要更加耐心，并等待服务器构建文件出现。 所以在开发过程中：

1. 您可以将 ASPNETCORE_ENVIRONMENT 变量设置为 Development
2. 您可以删除 ClientApp/dist 文件夹
3. 当您运行项目时，浏览器+服务器构建命令将运行，如您的 Startup.cs 中所指定
4. 耐心等待 dist/server 文件夹出现
5. 刷新浏览器窗口