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

這一切都有效！