Angular 8 веб-работников разбиты на IE

Question

Переходя с Angular 7 на 8 и обнаружил, что веб-работник, которого мы настроили для запуска фоновой задачи, больше не выполняется при запуске в IE 11 (и, вероятно, ранее). Edge, Chrome, все остальные были в порядке, просто IE 11.

Devtools жалуется на синтаксические ошибки и ссылается на файл es-2015. js.

Answer 1

Angular 8 покончил с традиционными методами полифилла для совместимости с ES6 + и ES5, используя дифференциальные сборки для разделения скриптов ES5 и ES6 +. Это прекрасно работает в основных компонентах приложения, но веб-работники запускают свои собственные процессы в своих собственных потоках и больше не имеют доступа к полифильтрам.

В конечном итоге решение оказалось намного проще, чем я думал. Убедитесь, что код внутри веб-работника соответствует ES5 и будет работать в IE.

Для нашего веб-работника это означало удаление любых функций стрелок (=>) и их замену традиционным объявлением функции и интерполяцией строк со старомодной конкатенацией.

// instead of 
myClass.doSomething( myVar => { console.log(`Look what I have in ${myVar}` } );

// do it old school
myClass.doSomething( function (myVar) { console.log('Look what I have in ' + myVar } );

(были некоторые другие посты, предлагающие вручную вставить полифилл ( здесь ), но я не мог заставить полифиллы успешно импортировать и загружать внутри веб-работника.)

Answer 2

По умолчанию в angular версии 8 включена дифференциальная загрузка для сборки ng. Однако для тестов ng и ng serve он генерирует только одну сборку ES2015, которая не может быть запущена в IE11.

Существует два способа использования кода ES5 во время подачи, который заставляет приложение angular 8 работать в IE11.

1. Полностью отключить дифференциальную нагрузку. (Не рекомендуется)

   Вы можете отключить дифференциальную загрузку, изменив цель с "es2015" на "es5" в вашем tsconfig. json.

2. Есть несколько конфигурации для подачи.

Создайте новый tsconfig tsconfig-es5.app. json рядом с tsconfig.app. json со следующим содержимым:

{ 
 "extends": "./tsconfig.app.json",
 "compilerOptions": { 
 "target": "es5"   
  }
}

В вашем angular. json добавьте два новых раздела конфигурации (узел es5) под сборку и укажите цель обслуживания для предоставления нового значения tsconfig.

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        ...
},
"configurations": {
"production": {
    ...
},
"es5": {
    "tsConfig": "./tsconfig-es5.app.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
    ...
},
"configurations": {
"production": {
...
},
"es5": {
    "browserTarget": "<your application name>:build:es5"
}
}
},

Затем вы можете запустить подачу с этой конфигурацией используя следующую команду:

ng serve --configuration es5

Кроме того, содержимое файла списка браузеров, как показано ниже:

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.