將 PWA 添加到 angular 8 - 模塊構建失敗

Question

我有 angular 8 應用程序。 在這個應用程序中，我有三個項目。

我想用這個命令添加@angular/pwa

ng add @angular/pwa && ng build --prod

但是安裝 PWA 時出現錯誤

錯誤 in./node_modules/@angular/service-worker/fesm2015/service-worker.js 模塊構建失敗：錯誤：ENOENT：沒有這樣的文件或目錄，打開 'C:\Development\Repositories\app\node_modules@angular\service -worker\fesm2015\service-worker.js'

在 Chrome 控制台中我得到

Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:34469)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)

在 PWA 之前一切正常

編輯：我也嘗試刪除 PWA 並將其直接添加到項目中

ng add @angular/pwa --project app1

現在在我的項目src中，我得到新文件manifest.webmanifest ，在項目的根目錄中我得到ngsw-config.json ，在項目模塊中我得到ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

但是，仍然得到同樣的錯誤

編輯：

這是我的文件夾結構。 這就是添加 angular CLI 的方式。 我需要添加另一個文件嗎？

我的任何文件夾中都沒有gsw-worker.js 。

另外，當我為"$schema": "../../node_modules/@angular/service-worker/config/schema.json"打開ngsw-config.json時，我得到了

Unable to load schema from c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json': ENOENT: no such file or directory, open 'c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json'

但是如果我查看node_modules shema.json 就在那里

(root -angular.json, package.json... there is no any manifest.webmanifest and ngsw-config.json)
 |
 |
 |----projects
        |
        |----app1
               |------src
               |       |------app
               |       |        |-app.module.ts (here is in imports ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })) 
               |       |
               |       |-manifest.webmanifest
               |
               |
      ngsw-config.json
      tsconfig.json
      tsconfig.app.json
      tsconfig.spec.json

ma app.module.ts 中的 Mabey（在我的項目中）是問題，因為我需要注冊'ngsw-worker.js'但我在我的應用程序中找不到任何地方，mabey angular CLI 沒有添加這個或者我沒有需要這個文件嗎？

Answer 1

請注意，添加 PWA 是使用以下命令將此功能添加到現有項目之一：

ng add @angular/pwa --project *project-name*

查看 angular 的官方文檔以獲取更多信息： https://angular.io/guide/service-worker-getting-started

Answer 2

您的應用程序中可能存在多個錯誤嘗試再次正確添加 pwa

ng add @angular/pwa --project *project-name*

然后用

ng build --prod

這是供您參考的鏈接 - https://angular.io/guide/service-worker-getting-started

Chrome 控制台錯誤

您收到該錯誤是因為您正在綁定從 object 訪問 ID，該 ID 未定義為您需要正確處理 object

例如let id = obj.id? obj.id: ''; let id = obj.id? obj.id: '';

嘗試先修復該錯誤，然后再構建它。 如果它不起作用，則刪除您的 node_modules，然后再次安裝並構建它。

希望這可以幫助：）

Answer 3

在將 pwa 安裝到 angular 項目之前，幾乎沒有什么。 首先，您需要更新您的 @angular/cli 以確保您擁有最新版本

npm i -g @angular/cli

然后運行

ng new projectname

然后將 pwa 添加到您的項目中

ng add @angular/pwa --project *project-name*

並運行

ng build --prod

Answer 4

使其工作的步驟...

• npm uninstall @angular/pwa

• npm cache clean

隨機錯誤§ 一些奇怪的問題可以通過簡單地運行 npm 緩存清理並重試來解決。 如果您在安裝 npm 時遇到問題，請使用 -verbose 選項查看更多詳細信息。

• 在所有這些ng update之后

這將修復此錯誤。 發生此錯誤是因為 package.json 中的某些依賴項不是最新的，並且它們與 pwa 混淆。