How to convert Angular 6 project to PWA application

Question

My project is already running using Angular 6, I need to integrate PWA to my existing application. When I add

ng add @angular/pwa

Output: + @angular/pwa@0.13.8

Only 1 file added in place of 6-7 files modify. If I create a new project and then do above command "ng add @angular/pwa" pwa works fine.

Anyone can find where I am doing mistake.

Answer 1

To integrate PWA into your project you need to follow these step:

Install these 2 package

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

In angular.json file add serviceWorker config like this

"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
            }
          }

Create ngsw-config.json in the same level of angular.json like this

{
  "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)"
        ]
      }
    }
  ]
}

And finally in your app.module.ts add in imports section

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