如何将 .Net Core 2.2 / Angular 8 应用程序转换为 PWA答案

【问题标题】：How to convert a .Net Core 2.2 / Angular 8 app to PWA如何将 .Net Core 2.2 / Angular 8 应用程序转换为 PWA
【发布时间】：2019-10-08 23:13:43
【问题描述】：

我可以按照 Angular 文档创建和测试 PWA 的基本 Angular 应用程序。但是，我无法将 .NET Core 2.2 / Angular 8 应用程序（最初使用 Visual Studio Angular SPA 模板创建）添加到渐进式 Web 应用程序。

我正在努力寻找有关如何执行此操作的任何在线帮助。微软的一切都是关于将 MVC 应用程序转换为 PWA - 没有关于将 Angular SPA / .NET Core 项目转换为 PWA。 Angular 方面的所有内容都没有说明 .NET Core Visual Studio 场景。

到目前为止，我所做的是通过 ng add @angular/pwa 对 angular 片段的 PWA 支持（并遵循整个 angular PWA / Service Worker 教程）

Microsoft 有一个用于 .net 核心服务工作者的 nuget 包，但据我所知，这不是针对 Angular SPA 的（因为它包括一个服务工作者，但我假设由 ng add @angular/ 创建的那个包pwa 是我需要的）。 https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker

我在 startup.cs 中尝试了各种配置，但似乎没有任何效果，包括跳过

spa.UseAngularCliServer(npmScript: "start");

改为使用

spa.UseProxyToSpaDevelopmentServer("http://localhost:8080")

并在 clientapp 文件夹下手动启动 http-server -p 8080 -c -1（根据 Angular 文档）（也尝试直接在 dist 文件夹下启动它）。

在我发布到我们的 IIS 服务器（每个 chrome 的开发工具）后，清单和服务工作者都没有加载。

如果有人对此有一个工作版本的 startup.cs 和其他配置文件或一些指针，将不胜感激。

【问题讨论】：

你在说什么，没有 PWA 模板，关闭计算机上的互联网会大大限制你的数据连接并开始制作仍然有效的功能，中提琴你有一个 PWA！
如果你使用 Angular 作为前端，.net 作为后端，你只需要担心 Angular 部分是 PWA，因为它将与你的 api 分离。 .Net 不需要了解有关您的角度 pwa 的任何信息，也不需要任何其他配置。该 Web Essentials 存储库适用于 MVC 模板，因为 .net 确实能够动态呈现页面，但如果您使用的是 angular，那么所有内容都已编译。您可以将构建的文件放在 wwwroot 中，但此时您基本上只是组合了两个单独的“项目”。
@nullptr.t 这就是我最初的想法，但让我感到震惊的是，在设置 Angular 前端并通过 VS 在本地运行服务器之后，服务人员根本没有运行.当我发布到 IIS 时，浏览器既没有检测到清单也没有检测到服务工作人员（开发工具显示清单丢失并且服务器工作人员没有运行）。关于我如何为 PWA 设置 Angular 部分，这一定是一个配置问题。至少我很高兴听到它应该可以工作并且它不是一些固有的不兼容

标签： c# angular visual-studio asp.net-core progressive-web-apps

【解决方案1】：

如果您想要guide to create a PWA with Angular，请查看这篇文章，我将在其中逐步解释整个过程。另外，您将在 Github 中找到一个有效的 Angular PWA 示例。

这篇文章是series about PWAs 的一部分，也许你可以看看他们来更好地了解这项技术。

如果您运行了原理图命令：ng add @angular/pwa，您应该已经在您的客户端应用程序上安装了一个服务工作者模块。加上一个 Web 清单和一个 Service Worker 配置文件（称为 ngsw-config.json），您可以在其中指定缓存策略。

因此，您应该已经能够在本地测试您的 PWA，请注意您需要一个 http 服务器和一个 Angular prod 构建来在本地运行服务工作者，因为 ng serve 不能与服务工作者一起使用。

【讨论】：

谢谢，我确实看过几篇文章，甚至可能是其中之一。就像我说的，我确实设法让一个 Angular 项目作为 PWA 工作。只是当 Angular 项目是在 Visual Studio 下运行的 .Net 项目的一部分时，我才看到问题。我会继续挖掘。
您是否在 IIS 中加载“dist”文件夹？产品构建后，Dist 文件夹中充满了捆绑包。
VS 就是这样做的。它使用 ng build --prod 构建项目并将 dist 文件夹复制到服务器。
@Alex 你有同样的解决方案吗？我也在寻找相同的。

【解决方案2】：

您可以运行ng build --prod 并复制生成的文件：

ngsw.json
ngsw-worker.js
safety-worker.js
worker-basic.js

到“src”文件夹。

然后，在 angular.json 中，将它们添加到“assets”数组中，如下所示：

*不要忘记从 src 和 assets 数组中删除文件以用于生产

【讨论】：