When using service worker in Angular 8 how can I test using my local rest API endpoint instead of production endpoint?

Question

In order to test how Service Worker caching is working in my Angular 8 application, as I understand it, I need to test against the production /dist files using "http-server -c-1", which works. However, because I am running against the production /dist files, the program thinks it is in production and therefore uses the production back-end. I would like it to use my local back-end at localhost:3000 while testing Service Worker. Is there a way to do this?

environment.prod.ts

export const environment = {
    production: true,
    dataServiceURL: "http:/xxxxxxxxx-east-2.elasticbeanstalk.com/"
};

environment.ts

export const environment = {
    production: false,
    dataServiceURL: "http://localhost:3000/"
};

ngsw-config.json

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [
    {
        "name": "app",
         "installMode": "prefetch",
         "resources": {
             "files": [
                 "/favicon.ico",
                 "/index.html",
                 "/*.css",
                 "/*.js",
                 "/assets/i18n/en.json"
             ]
          }
        }, {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": [
                    "/assets/**",
                    "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani|json)"
                ]
             }
        }
    ]
}

**Error shows accessing production rather than localhost:3000 **

w$ {headers: c$, status: 0, statusText: "Unknown Error", url: "http://xxxxxxxxxx-2.elasticbeanstalk.com/api/posts", ok: false, …}

UPDATE: Applied suggested fix

window.service.ts

import { Injectable } from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}
@Injectable({
  providedIn: 'root'
})
export class WindowService {

  constructor() { }

  get nativeWindow(): any {
    return _window();
  }
}

data.service.ts - new function

getLocation() {
    const hostLocation = this.WindowRef.nativeWindow.location.host;
    let dataSvcURL = environment.dataServiceURL + 'api/posts';

    console.log('Host location ', hostLocation);

    if (environment.production && hostLocation.includes('localhost')) {
      dataSvcURL = 'http://localhost:3000/' + 'api/posts';
    }

    console.log('Back-end location ', dataSvcURL);
    return dataSvcURL;
  }

Console.log shows override of back-end URL
Host location localhost:8080
Back-end location http://localhost:3000/api/posts

Rajesh Dwivedi · Accepted Answer · 2019-11-02 19:17:49Z

0

In your angular app, you can make a conditional check if your current host is 'localhost', update the

environment. dataServiceURL

to point to use local backend service otherwise use the value from the environment. Something like

if(environment.production && window.location.hostname === 'localhost') {environment.dataServiceURL = 'http://localhost:3000';}

answered Nov 2, 2019 at 19:17

Rajesh Dwivedi

3702 silver badges13 bronze badges

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

1 Comment

DevReboot Over a year ago

Thanks Rajesh. This pointed me in the right direction. I found, however, it seems that one is supposed to get a reference to the window object, rather than access directly. So I added a window.service.ts which returns a reference to the window object and then use that in my data service in the manner you suggest.

Collectives™ on Stack Overflow

When using service worker in Angular 8 how can I test using my local rest API endpoint instead of production endpoint?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related