2

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"
}
Improve this question
1
  • 2
    The easiest way to set up a service worker with Angular is to run ng add @angular/pwa - it will set up all the requirements for you Commented Jun 13, 2018 at 6:53

1 Answer 1

Reset to default
4

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you Anand for your answer but I have already converted my project into a PWA application with the help of above command that you are telling and I have all the files including ngsw-config.json in the root of the project. I guess, you are telling about how to convert an Angular application into a PWA application but my question is totally different . I am integrating the Firebase and its services into my application and I am getting error in that, not for the PWA service worker.
Thank you Anand for your answer but I have already converted my project into a PWA application with the help of above command that you are telling and I have all the files including ngsw-config.json in the root of the project. I guess, you are telling about how to convert an Angular application into a PWA application but my question is totally different . I am integrating the Firebase and its services into my application and I am getting error in that, not for the PWA service worker.
@NSharma you got confused with your other question on Firebase :) Please recheck on this question again. This question has no word on Firebase and the error is ngsw-config.json, for which I've given the above answer. If you have already fixed the same and if it matches the answer, please mark as correct so it will help others. I've also spent some time with this error as Angular 5 to 6, location of this file got changed .
Oh yes, apologies for the mistake,I got you wrong. Thank you very much :) . I appreciate it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.