Angular Polyfill for Angular 14 app giving an error

Question

I recently upgraded my angular app from v14 to v15. Due to a business need, we need to support Chrome 69 for the app. So, I added the following lines of code in my polyfills.ts file:

import '@angular/localize/init';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'zone.js/dist/zone';

The compilerOptions in my tsconfig.json are as follows:

"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"typeRoots": [
  "node_modules/@types"
],
"lib": [
  "es2020",
  "dom"
],
"useDefineForClassFields": false

}

Now, my code works in the latest chrome browser. But, it doesn't load in Chrome 69. I see the below error lines in the dev console of Chrome 69.

Uncaught SyntaxError: Unexpected token .     /polyfills.js:1
Uncaught SyntaxError: Unexpected token .     /main.js:1

Any help in resolving this issue would be greatly appreciated. Thanks in Advance.

Answer 1

As commented, I would start with changing the target of your TypeScript compiler to an earlier version of ECMAScript that is more widely supported.

The error message "Uncaught SyntaxError: Unexpected token" suggests that your code includes some language syntax that is not supported by Chrome 69.
Even though your TypeScript configuration is targeting ES2022, Chrome 69 may not fully support all ES2022 features, and that's why you are seeing this error. This indicates that the polyfills you have added are not successfully providing the needed functionality.

So, in your tsconfig.json file, change the "target" field from "ES2022" to "ES2015".
Your tsconfig.json would include:

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

After making this change, try to compile and run your Angular app again. If there are any ES2022 features being used in your code that are not available in ES6, the TypeScript compiler will now transpile those features into ES6-compatible code, which Chrome 69 should be able to understand.

Note that by setting the target to ES2015, the outputted JavaScript code may be a bit more verbose and slightly less performance-optimized than when targeting ES2022, because some newer language features ca not be used directly and instead have to be emulated using older JavaScript constructs.
However, this should not be a significant concern unless you are working on a very performance-sensitive application.

---

If I change the target to ES2015, do I still need whatever is there in polyfills.ts file or can I remove it?

In general, changing the target in your tsconfig.json file to ES2015 may reduce the need for some polyfills, but it does not necessarily eliminate the need for all of them. The purpose of polyfills is to provide newer functionality in older environments that natively do not support them.

Here is a breakdown of the polyfills you have mentioned:

1. import '@angular/localize/init'; - This is an Angular localization package, and its necessity does not depend on your ECMAScript target.

2. import 'core-js/stable'; - Core-js is a modular standard library for JavaScript, and it includes polyfills for ECMAScript up to 2021. You might still need this, depending on the specific features you are using in your code.

3. import 'regenerator-runtime/runtime'; - This polyfill specifically allows you to use generator functions and async functions in environments that do not natively support them. If you are using these features, you may still need this polyfill, even with a target of ES2015.

4. import 'zone.js/dist/zone'; - This is a requirement for Angular's change detection mechanism and is not related to the ECMAScript target.

So, you might still need the code in your polyfills.ts file, even if you change the target to ES2015.
However, it is important to verify this based on your application's specific needs and dependencies.
It is also worth noting that Angular CLI will automatically include some necessary polyfills based on your .browserslistrc file.

---

I have made the changes which you have told. But, when I test in Chrome 69, I get an error in the following line of code:

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

The error is: Unexpected token ?.

I did some search and could find out that it is because chrome 69, doesn't support optional-chaining feature.
How can I add a polyfill to support optional-chaining?

To support optional chaining in your Angular application, you might try and use Babel's transform for optional chaining.

First, you need to install the Babel plugin. Depending on your package manager, you can do this with one of the following commands:

• npm: npm install --save-dev @babel/plugin-transform-optional-chaining
• Yarn: yarn add --dev @babel/plugin-transform-optional-chaining
• pnpm: pnpm add --save-dev @babel/plugin-transform-optional-chaining

Next, you should add the plugin to your Babel configuration. In your babel.config.json file, add "@babel/plugin-transform-optional-chaining" to the plugins array:

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

If you do not have a babel.config.json file, you will need to create one at the root of your project. Note that this file is separate from your tsconfig.json file.