Angular 6.1.2 PWA 不工作

Question

我尝试了互联网上关于如何将 PWA 添加到 Angular 项目的所有解决方案，但仍然在 Chrome Dev Tools 中，没有注册 service worker。

我确实运行了ng add @angular/pwa ，使用ng build --prod和http-server -o ，但仍然没有注册服务工作者。 它还没有添加@angular/service-worker包，也没有像 Internet 上显示的那样的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 项目？

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我遇到过同样的问题。 问题不在于这个命令：ng add @angular/pwa

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

我是这样决定的。

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

这一切都有效！