无法在Angular JS中配置服务人员

Question

I am making an Angular progressive application. I am doing with service workers and getting an error on CLI -

Error: Expected to find an ngsw-config.json configuration file in the /home/nancy/Desktop/beautyOfSoul folder. Either provide one or disable Service Worker in your angular.json configuration file.

I am dealing with Angular 6. I know that, angular.json file should contain "serviceWorker": true but I can not find any like below in my angular.json file where I can write "serviceWorker": true .

{ 
  "apps": [{ 
    ..., 
    "serviceWorker": true
  }]
}

My angular.json file is as below:

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "beautyOfSoul": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",

      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/beautyOfSoul",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets", 
  "src/assets/manifest.json"
            ],


            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "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      
           }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "beautyOfSoul:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "beautyOfSoul:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "beautyOfSoul:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "beautyOfSoul-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "beautyOfSoul:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "beautyOfSoul:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },

  "defaultProject": "beautyOfSoul"
}

Answer 1

Here is the official doc . You can run the below command which will setup the files and libs needed to convert your app into PWA.

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

When you run this command, apart from config file changes and installing libs,

1) it will add manifest.json just under "src" folder(not in assets) and its better to keep it the default way, though you can try to map it from there.

2) it will add ngsw-config.json in the root of the project (parent directory of src). This has to be in this location starting Angular 6(in 5, it was in src I guess which was changed to root folder in 6) This file was not found in your case which is causing the issue. Either move your existing one here or delete existing one and let the above one create it for you(which is better).