Приложение Angular Polyfill для Angular 14 выдает ошибку

Как уже отмечалось, я бы начал с изменения цели вашего компилятора TypeScript на более раннюю версию ECMAScript, которая поддерживается более широко.

Сообщение об ошибке «Uncaught SyntaxError: Unexpected token» предполагает, что ваш код включает синтаксис языка, который не поддерживается Chrome 69.
Несмотря на то, что ваша конфигурация TypeScript нацелена на ES2022, Chrome 69 может не полностью поддерживать все функции ES2022, поэтому вы видите эту ошибку. Это указывает на то, что добавленные вами полифилы не обеспечивают необходимую функциональность.

Итак, в вашем файле tsconfig.json измените поле "target" с "ES2022" на "ES2015".
Ваш tsconfig.json будет включать:

"compilerOptions": {
    ...
    "target": "ES2015",
    ...
}

После внесения этого изменения попробуйте снова скомпилировать и запустить приложение Angular. Если в вашем коде используются какие-либо функции ES2022, недоступные в ES6, компилятор TypeScript теперь преобразует эти функции в код, совместимый с ES6, который Chrome 69 должен понимать.

Обратите внимание, что при установке цели на ES2015 выводимый код JavaScript может быть немного более подробным и немного менее оптимизированным по производительности, чем при настройке на ES2022, потому что некоторые новые языковые функции нельзя использовать напрямую, и вместо этого их необходимо эмулировать с использованием старых конструкций JavaScript. .
Однако это не должно быть серьезной проблемой, если только вы не работаете с очень чувствительным к производительности приложением.

Если я изменю цель на ES2015, мне все еще нужно то, что есть в файле polyfills.ts, или я могу удалить его?

В общем, изменение цели в вашем файле tsconfig.json на ES2015 может уменьшить потребность в некоторых полифиллах, но не обязательно устраняет необходимость во всех них. Цель полифиллов — предоставить новые функциональные возможности в старых средах, которые изначально их не поддерживают.

Вот разбивка полифиллов, которые вы упомянули:

1. import '@angular/localize/init'; - Это пакет локализации Angular, и его необходимость не зависит от вашей цели ECMAScript.

2. import 'core-js/stable'; — Core-js — это модульная стандартная библиотека для JavaScript, которая включает полифиллы для ECMAScript до 2021 года. Она может вам все еще понадобиться в зависимости от конкретных функций, которые вы используете в своем коде.

3. import 'regenerator-runtime/runtime'; — Этот полифил специально позволяет вам использовать функции генератора и асинхронные функции в средах, которые изначально не поддерживают их. Если вы используете эти функции, вам все еще может понадобиться этот полифилл, даже с целью ES2015.

4. import 'zone.js/dist/zone'; — Это требование для механизма обнаружения изменений Angular и не связано с целью ECMAScript.

Таким образом, вам может понадобиться код в файле polyfills.ts, даже если вы измените цель на ES2015.
Однако важно проверить это на основе конкретных потребностей и зависимостей вашего приложения.
Также стоит отметить, что Angular CLI автоматически включит некоторые необходимые полифиллы на основе вашего файла .browserslistrc.

Я сделал изменения, которые вы сказали. Но когда я тестирую в Chrome 69, я получаю сообщение об ошибке в следующей строке кода:

textEncoder?? (textEncoder = new TextEncoder()); 

Ошибка: Unexpected token ?.

Я провел поиск и выяснил, что это связано с тем, что chrome 69 не поддерживает функцию опциональной цепочки. Как я могу добавить полифилл для поддержки необязательных цепочек?

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

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

• нпм: npm install --save-dev @babel/plugin-transform-optional-chaining
• Пряжа: yarn add --dev @babel/plugin-transform-optional-chaining
• пнм: pnpm add --save-dev @babel/plugin-transform-optional-chaining

Затем вы должны добавить плагин в конфигурацию Babel. В вашем файле babel.config.json добавьте "@babel/plugin-transform-optional-chaining" к массиву plugins:

{
  "plugins": ["@babel/plugin-transform-optional-chaining"]
}

Если у вас нет файла babel.config.json, вам нужно будет создать его в корне вашего проекта. Обратите внимание, что этот файл отделен от вашего файла tsconfig.json.