c# - 如何捆绑.Net Core API + Angular 前端

Question

我有一个面向公众的 Angular 前端，它连接到 .NetCore 后端。这两个项目使用 webpack 捆绑在一起。问题是，我需要启用服务器端渲染，而 Microsoft 已弃用/使 UseSpaPrerendering 过时。我确实遵循了这个tutorial但它在 .net core 3.0/3.1 中根本不能很好地工作。当我开始工作时，我得到了 FOUC(未渲染内容的 Flash)并且页面加载速度非常慢。

既然如此，我如何部署具有服务器端渲染的.net core API/Angular前端应用程序？

Answer 1

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

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

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

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

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

你能试试这个吗？我也来试试。

更新:

我尝试了 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 将使应用程序在开发和生产模式下的行为方式相同。
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. 刷新浏览器窗口