При использовании сервисного работника в Angular 8, как я могу протестировать, используя мою локальную конечную точку API отдыха вместо рабочей конечной точки? - PullRequest
Новая
       6

При использовании сервисного работника в Angular 8, как я могу протестировать, используя мою локальную конечную точку API отдыха вместо рабочей конечной точки?

0 голосов
/ 02 ноября 2019

Чтобы проверить, как работает кэширование Service Worker в моем приложении Angular 8, насколько я понимаю, мне нужно протестировать файлы производства / dist с помощью «http-server -c-1», который работает. Однако из-за того, что я работаю с файлами производства / dist, программа считает, что она работает, и поэтому использует производственный бэкэнд. Я хотел бы, чтобы он использовал мой локальный бэкэнд на localhost: 3000 при тестировании Service Worker. Есть ли способ сделать это?

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

** Ошибка показывает доступ к производству, а не к локальному: 3000 **

w $ {заголовки: c$, status: 0, statusText: «Неизвестная ошибка», URL: «http://xxxxxxxxxx -2.elasticbeanstalk.com / api / posts », ok: false,…}

ОБНОВЛЕНИЕ: применено предлагаемое исправление

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 - новая функция

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 показывает переопределение внутреннего URL-адреса
Расположение хоста localhost: 8080
Расположение сервера http://localhost:3000/api/posts

1 Ответ

0 голосов
/ 02 ноября 2019

В вашем угловом приложении вы можете сделать условную проверку, если ваш текущий хост - 'localhost', обновите среду

. dataServiceURL

для указания на использование локальной серверной службы, в противном случае используйте значение из среды. Что-то вроде 

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