Тестирование локального веб-компонента на стенде

О тестировании

Для тестирования своих веб-компонентов "в бою", не требуется долгий процесс сборки. Достаточно всего один раз установить на стенд рутовое приложение, добавив в его конфигурацию следующее:

{
  sidebar: {
    visible: true,
    dynamicMenu: true,
  }
}

Теперь в рутовом приложении для тестирования доступен пункт "Проксирование". Его не следует добавлять в production-приложении, чтобы не навредить клиентам.

Вставка своего меню и проксирование загрузки бандлов вашего приложения на localhost

Нажав на этот пункт меню, отобразится модальное окно, в левой части которого можно вставить собственное меню, а в правой части проксируемые адреса. Если меню на стенде и на локальном компьютере идентичны, можно не вставлять собственное меню.

Справа снизу доступны кнопки "Прокси для моего меню", "Добавить прокси" и "Сохранить".

Кнопка "Добавить прокси" отобразит новое прокси в верхней правой части модального окна. Поле "Проксируемый адрес" должно отображать точный путь до main.js без домена. Поле "Целевой адрес" должно содержать точный путь до main.js на localhost. Таким образом, бандлы веб-компонентов, для которых используется прокси, будут загружаться не со стенда, а с локального компьютера.

Кнопка "Прокси для моего меню" предназначена для создания нескольких прокси. Для этого необходимо предварительно заполнить поле "Проксируемый адрес" согласно вставленному меню.

Ошибки с sockjs и iframe

Если при использовании функциии проксирования в консоли сыпятся ошибки, связанные с sockjs и iframe, нужно запускать локальную сборку с флагом--live-reload=false:

ng serve --live-reload=false

В противном случае в консоли браузера будут ошибки, связанные с сокетами.

Также на примере одного из продуктов ниже показано, как в локальном режиме делать запросы к продуктовому API:

import { environment } from '../environments/environment';
 
const apiBaseUrl = environment.production ? QCoreService.config.apiBaseUrl : 'http://localhost:4200';
 
proiders: [
  {provide: BaseService, useFactory: () => new QUrlService({baseUrl: apiBaseUrl, serviceName: 'qmoillicense'})}
]

const PROXY_CONFIG = [
  {
    context: ['/api'],
    target: 'http://qmoilui.fasysqrun.qrun.diasoft.ru',
    secure: false,
    changeOrigin: true,
    logLevel: 'debug',
  },
];