Angular 6.1.2 PWA 不工作答案

【问题标题】：Angular 6.1.2 PWA not workingAngular 6.1.2 PWA 不工作
【发布时间】：2018-08-15 22:38:41
【问题描述】：

我尝试了互联网上所有关于如何将 PWA 添加到 Angular 项目的解决方案，但仍然在 Chrome 开发工具中，没有注册服务工作者。

我确实使用ng build --prod 和http-server -o 运行了ng add @angular/pwa，但仍然没有注册服务人员。它也没有添加 @angular/service-worker 包，也没有像互联网上所指出的那样添加 Manifest.json 文件。

我还尝试使用预装了ng new myProject --service-worker 的 PWA 创建一个新项目，但也无法正常工作。

我什至尝试注册服务，如下所示：

if ( 'serviceWorker' in navigator ) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); });

附注：当我运行 ng add @angular/pwa 时，我收到一条消息“路径 '/ngsw-config.json' 已存在”，所以我发现该文件位于 @schematics 包下。该脚本仅添加了一个 @angular/pwa 包，它与 Angular PWA 文档不相关。

这是我的环境：

Angular 6.1.2
Angular CLI: 6.1.3
Node 8.11.3
NPM  5.6.0

我需要做什么才能获得一个普通的 PWA Angular 项目？

【问题讨论】：

是的，不幸的是，最近cli 中似乎有很多错误:( 我自己也遇到了这个问题，还没有找到任何 easy 解决方案。正在工作同时在项目的其他部分:)
我这里有一个空的基础 PWA，如果与你的比较可能会有所帮助。 github.com/ng-chicago/AngularBasePWA
请注意我采取的创建步骤在 ReadMe.md 中
谢谢@Mathias，我确实测试了你的项目，但没有成功，站点工作，但没有服务人员，并且出现以下错误：'SecurityError: Only secure origins are allowed'。我想现在不是启动 PWA 应用程序的好时机，所以我们回到混合应用程序
我将它部署到了一个 HTTPS 服务器并且它工作了，谢谢@Mathias。所以这让我更深入地挖掘并试图找出问题所在。新版本的@angular/pwa 有一些错误。所以运行ng add @angular/pwa@0.6.8 工作得很好

标签： angular progressive-web-apps

【解决方案1】：

这是@angular/pwa 软件包的新版本，有一些错误。所以运行ng add @angular/pwa@0.6.8 对我来说非常有效。

在本地测试 Service Worker：如果您已将 Firebase 添加到您的项目（托管），您可以运行 ng build --prod，然后运行 firebase serve。如果您没有 Firebase，您可以运行 ng build --prod，cd 进入 dist 文件夹（取决于您的配置），然后运行 http-server -o。如果您没有http-server 模块，请运行npm i -g http-server 安装它

【讨论】：

所有示例都使用 ng build --prod。我怎样才能使它与 ng build 一起工作？
@EroStefano 您可以省略--prod 或添加-c=stage 用于舞台环境（如果已设置）

【解决方案2】：

尝试使用 Angular 控制台：https://angularconsole.com/

它抽象了 cli 所具有的许多了解逻辑的需要。

它处于测试阶段，但它应该可以帮助您为 PWA 创建基础。试一试它是由 Nrwl 团队构建的，该团队还构建了 Nx，这是使用原理图对 angular/cli 的增强

【讨论】：

感谢@Nico 的建议。我确实尝试过 Angular 控制台，但它给出了完全相同的结果
您是否尝试过使用 Angular 控制台创建一个新项目并将 pwa 原理图添加到其中？
但是我们有旧的大型项目，我们不能在每个版本的 cli 上创建新项目。 PWA 仍然非常不可用。 PWA 浪费了很多时间却没有结果。我将在版本 10 中尝试 PWA，现在我已经有足够的非功能性 PWA。这很漂亮 - 他们在没有解决方案的情况下关闭了 PWA 问题，而 PWA 仅适用于空的新项目。

【解决方案3】：

我有同样的问题。问题出在这个命令之上： ng 添加@angular/pwa

没有将模块 @angular/pwa 添加到 package.json 依赖项中。

我就这么决定了。

首先我运行 ng add @angular/pwa 然后我做了： npm install @angular/pwa

一切正常！

【讨论】：