如何将Angular 6项目转换为PWA应用程序

Question

我的项目已经在使用Angular 6运行，我需要将PWA集成到我现有的应用程序中。当我添加

ng add @angular/pwa

输出：+ @angular/pwa@0.13.8

仅添加1个文件，而不是修改6-7个文件。如果我创建了一个新项目，然后执行上面的命令，"ng add @angular/pwa" pwa就能正常工作。

任何人都可以找到我哪里做错了。

Answer 1

要将PWA集成到您的项目中，您需要执行以下步骤：

安装这2个包

"@angular/pwa": "0.12",
"@angular/service-worker": "^7.2.12"

在angular.json文件中添加serviceWorker配置，如下所示

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }

在相同级别的angular.json中创建ngsw-config.json，如下所示

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://cdnjs.cloudflare.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

最后在您的app.module.ts add - in imports部分

ServiceWorkerModule.register("ngsw-worker.js", { enabled: environment.production })