FAQ

Вопросы и ответы

Как добавлять собственные ресурсы (картинки, ...)?

При разработке приложения, часто встаёт вопрос о том, как добавить, например, картинку. Так как разработка ведётся не только над одним приложением в изолированной среде, а над приложением, загружающим в одну и ту же область видимости несколько других приложений и использующие, по сути, одну и ту же директорию с ресурсами, нужно разделять эти ресурсы уникальными путями. Для решения этой задачи предлагается в директории/src/assetsсоздать поддиректорию с названием, соответствующим названию вашего веб-компонента.**Самое важное здесь - уникальность имени.**Тогда, при слиянии директорийassetsвсех веб-компонентов и рутового приложения в одну, не возникнет ситуаций перезаписи одних и тех же ресурсов другими.

Как решать проблему с CORS

Для решения проблемы с CORS используется гейтвей. Гейтвей должен быть доступен по адресуhttp://<domain>/api. Тогда запросы будут в рамках одного домена и ошибки CORS не возникнет.

Например:

  1. Хотим сделать запрос с домена http://<domain> к ресурсу http://<domain>/service/rest/resource.
  2. Домен http://<domain>/ заводится в настройки гейтвея (задача DevOps или администратора).
  3. Теперь, если сделать запрос на http://<domain>/api/service/rest/resource, - это будет равноценно запросу на http://<domain>/service/rest/resource, то есть вызов пройдет через гейтвей, который находится на том же домене.

Как настроить базовые адреса всех сервисов QPalette

Для рутового приложения

Прописать вsrc/assets/data/config.base.jsonбазовые URL для загрузчиков бандлов, виджетов и модуля авторизации:

'bundleLoader': {
  'bundleUrl': '/api/$service/$component/main.js'
},
'widgetLoader': {
  'bundleUrl': '/api/$service/widgets/$component/main.js'
},
'widgets': {
  'bundleUrl': '/api/$service/$component/widgets/$widget/main.js'
},
'auth': {
  'service': 'default',
  'options': {
    'authDataServiceConfig': {
      'urls': {
        'base': '/api'
      }
    }
  }
},

Рутовое приложение нужно брать из ветки master.

Для веб-компонента

В секцииimportsвAppModuleвеб-компонента нужно импортировать модулиQWidgetLoaderModuleиQAuthModuleс конфигурацией из сервисаQCoreService:

@NgModule({
  imports: [
    QWidgetLoaderModule.forRoot(QCoreService.config.widgetLoader),
    QAuthModule.forRoot(QCoreService.config.auth)
    QWidgetModule.forRoot(QCoreService.config.widgets),
  ],
})

Для построения URL-адресов к REST-ресурсам использоватьQUrlService, как описано в документации (см. вариант сbaseUrl = QCoreService.config.apiBaseUrl).

Если запросы к /api выдают 404 ошибку

Если запросы к /api выдают 404 ошибку, то нужно в Kubernetes настроить ингрессы таким образом (для этого обратитесь к вашему DevOps-специалисту):

nginx.ingress.kubernetes.io/rewrite-target: /$1
rules:
    - host: some.product.namespace.diasoft.ru
      http:
        paths:
          - path: /(.*)
            pathType: Prefix
            backend:
              service:
                name: ИМЯ ВАШЕГО СЕРВИСА
                port:
                  number: 8080
          - path: /api/(.*)
            pathType: Prefix
            backend:
              service:
                name: ИМЯ СЕРВИСА MDPGATEWAY
                port:
                  number: 8080

Прокси

Проксирование к бэкендному серверу

Используйте поддержку прокси-сервера на сервере разработки webpack, чтобы перенаправлять определенные URL-адреса на внутренний сервер, передавая в файл--proxy-configпараметр сборки. Например, для переадресации всех вызововhttp://localhost:4200/apiна сервер, работающий наhttp://localhost:3000/api, выполните следующие действия:

  1. Создайте файл proxy.conf.json в папке src/ вашего проекта.
  2. Добавьте следующее содержимое в новый прокси-файл:
  3. В файле конфигурации CLI, angular.json, добавьте параметр конфигурации прокси-сервера к цели serve:
  4. Чтобы запустить сервер разработки с этой конфигурацией прокси-сервера, вызовите serve.

Отредактируйте файл конфигурации прокси-сервера, чтобы добавить параметры конфигурации; ниже приведены некоторые примеры. Описание всех опций см. в документации webpack DevServer documentation (opens in a new tab).

Обратите внимание, что если вы редактируете файл конфигурации прокси-сервера, вы должны перезапустить процесс ng serve, чтобы ваши изменения вступили в силу.

Переназначение пути к URL-адресу

Параметр конфигурации прокси-сервераpathRewriteпозволяет переписать путь URL во время выполнения. Например, укажите следующее значениеpathRewriteдля конфигурации прокси-сервера, чтобы удалить "api" из конца пути.

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Если вам нужно получить доступ к серверной части, которая не находится наlocalhost, также установите параметрchangeOriginНапример:

{
  "/api": {
    "target": "http://npmjs.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

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

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

Уровни журнала прокси-сервера - этоinfo(по умолчанию),debug,warn,errorиsilent.

Прокси с несколькими записями

Вы можете перенаправить несколько записей на один и тот же целевой объект, определив конфигурацию в JavaScript.

Установите в файле конфигурации проксиproxy.conf.js(вместоproxy.conf.json) и укажите файлы конфигурации, как в следующем примере.

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]
 
module.exports = PROXY_CONFIG;

В файле конфигурации CLI,angular.json, укажите на файл конфигурации прокси-сервера JavaScript:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.js"
    },
...

Обход прокси

Если вам нужно дополнительно обойти прокси-сервер или динамически изменить запрос перед его отправкой, добавьте опцию обхода, как показано в этом примере JavaScript.

const PROXY_CONFIG = {
    "/api/proxy": {
        "target": "http://localhost:3000",
        "secure": false,
        "bypass": function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf("html") !== -1) {
                console.log("Skipping proxy for browser request.");
                return "/index.html";
            }
            req.headers["X-Custom-Header"] = "yes";
        }
    }
}
 
module.exports = PROXY_CONFIG;

Использование корпоративного прокси

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

npm install --save-dev https-proxy-agent

Когда вы определяете переменную окруженияhttp_proxyилиHTTP_PROXY, автоматически добавляется агент для передачи вызовов через ваш корпоративный прокси-сервер при запускеnpm start.

Используйте следующее содержимое в файле конфигурации JavaScript.

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];
 
function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}
 
module.exports = setupForCorporateProxy(proxyConfig);

Как узнать какие роли у моего пользователя?

Вы можете проверить, есть ли у Вашего пользователя соответствующая роль, скопировав свой access_token (можно посмотреть в network-вкладке браузера в ответе запроса к mdpauth при авторизации), вставив его в поле Encoded в сервисе https://jwt.io/ (opens in a new tab) и проверить поле authorities в блоке Decoded.

Как перейти на какой-то URL-адрес, кликнув по пункту из меню?

Эта задача очень легко осуществима. Просто добавьте к вашему пункту меню ключlink, значение которого отображает требуемый адрес.

{
  "caption": "Сайт компании Диасофт",
  "link": "https://diasoft.com"
}

При этом ключиservice,componentиrouteбудут проигнорированы.

Техническая поддержка