polyfills для приложения angular, с веб-работником, созданным из CLI - PullRequest
Новая
       74

polyfills для приложения angular, с веб-работником, созданным из CLI

1 голос
/ 02 апреля 2020

У меня есть приложение, которое требует интенсивной фильтрации данных на стороне клиента, поэтому очень важно использовать веб-работников для обеспечения плавности пользовательского интерфейса. У меня есть веб-работник, работающий на один из моих фильтров, и у меня возникают проблемы с IE, когда моя машинопись не компилируется до es5 для веб-работника.

Я читал в Интернете и в стеке, что, поскольку веб-работники будут работать в отдельном контексте выполнения, они не будут иметь доступа к полифиллам angular.

Я знаю, что мой веб-работник работает в IE11, потому что я могу войти в контекст веб-работника и увидеть его в консоли. Я также получаю эту ошибку, означающую, что мой TS не получил преобразование в правильную версию js.

Ошибка от работника

Что я ' Мы попробовали вручную включить полифилл для этой указанной c ошибки из документации Mozilla, и она не сработала.

Если у кого-то есть какие-либо идеи по этому поводу, это было бы очень полезно: D

это мой tsconfig для моего работника 

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "ES2018",
      "webworker"
    ],
    "target": "es5",
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

это мой глобальный файл tsconfig для angular приложения 

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "node"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
  }
}

и это мой работник, который выполняет некоторую фильтрацию 

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {

  let filteredData = data[0];
  const params = data[1];
  const excludedFilters = ['level', 'sol_id', 'dac_name'];
  const location = params['dac_name'];

  for (let param of Object.entries(params)) {
    const key = param[0] as string;
    const val = param[1] as string;

    if (!excludedFilters.includes(key)) {
      filteredData = data[0].filter(obj => obj[key] === val)
    }
  }

  if (location) {
    if (location != 'All Data Centres') {
      filteredData = filteredData.filter(obj => obj['dac_name'] === location)
    }
  }

  postMessage(filteredData)
});

РЕДАКТИРОВАТЬ: После включения polyfills вручную, в IE11 я получаю эту ошибку: новая ошибка

Ошибка теперь говорит работник. Вместо работника. js

1 Ответ

0 голосов
/ 03 апреля 2020

enter image description here

Из сообщения об ошибке представляется, что, возможно, рабочий. js использует метод Object.entries. Основываясь на документе Object.entries () , мы видим, что метод записи не поддерживает браузер IE.

Чтобы использовать его с IE Браузером, вы можете использовать любое из следующего:

  1. Добавление этой строки в polyfill.ts (если ядро ​​- js) папка не содержит es7, см. эту ссылку для обновления ядра - js): 

    import 'core-js/es7/object';

  2. Добавление следующего сценария в заголовок Индекс. html. 

    <script>
if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}
</script>
...