title: Angular 7 Service Worker setup - ngsw-worker.js registration error
body: <p><strong>Issue:</strong></p>
  
  <p>Currently get ERR_INVALID_RESPONSE and /ngsw-config.json:-Infinity
  Parser error: for the ngsw-worker.js file in the network traffic.</p>
  
  <p><strong>See image below:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Ejozw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ejozw.png" alt="enter image description here"></a></p>
  
  <p><strong>Tech:</strong> Angular cli and Angular version 7.</p>
  
  <p><strong>Things I've done</strong></p>
  
  <p><strong>I've added these tags to the index.html head:</strong></p>
  
  <pre><code>  &lt;link rel="manifest" src="manifest.json"&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="theme-color" content="#2c3e50"&gt;
  </code></pre>
  
  <p><strong>My Manifest.json:</strong></p>
  
  <pre><code>{
    "short_name": "test",
    "name": "test.co.uk",
    "start_url": "/",
    "background_color": "#2c3e50",
    "display": "standalone",
    "orientation": "portrait",
    "theme_color": "#2c3e50",
    "icons": []
  }
  </code></pre>
  
  <p><strong>My angular.json file:</strong></p>
  
  <pre><code>"serviceWorker": true
  </code></pre>
  
  <p>For:</p>
  
  <p>"architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": { "serviceWorker": true</p>
  
  <p><strong>My Main.ts file:</strong></p>
  
  <pre><code>import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule).then(() =&gt; {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/ngsw-worker.js') ;
      }
    }).catch(err =&gt; console.log(err));
  </code></pre>
  
  <p><strong>My ngsw-worker.js file:</strong> </p>
  
  <pre><code>{
    "index": "/index.html",
    "assetGroups": [{
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }],
    "dataGroups": [{
      "name": "api-freshness",
      "urls": [
        "/new"
      ],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s",
        "strategy": "freshness"
      }
    }, {
      "name": "api-performance",
      "urls": [
        "/"
      ],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1d",
        "strategy": "performance"
      }
    }]
  }
  </code></pre>