CODEWITHSUNDEEP
angulartypescriptwebpackoptional-chainingnullish-coalescing
Ajit Hingmire
Ajit Hingmire

Reputation: 201

Angular typescript error with BigInt and Optional Chaining, nullish coalescing

We have an application that needs to be supported in old Chrome (v79).

Angular Version 13.2.7 Typescript Version 4.5.5 Node Version 16.14.0

We are getting an error:

ERROR: Big integer literals are not available in the configured target environment

When we set target as 2017 (anything less than 2020) & optimization is enabled for the build. BigInt are part of es2020 specification & I could not find a polyfill that works.

When we set target as es2020, error with BigInt is resolved, angular build is successful but application fails to open in Chrome 79 due to error Unrecognized character. This is happening as for es2020 optional chaining (?.) & nullish coalescing is not transpiled by typescript as these operators are natively supported in es2020 target. So we can neither stay on es2017 nor jump to es2020. I looked into using Babel transpilation with Angular, WebPack but nothing worked. Is anyone able to fix this issue?

Upvotes: 2

Views: 76

Answers (2)

shantanu.singh
shantanu.singh

Reputation: 21

Try to build the app after adding this browserslint config in the package.json.

For key production add the supports bigint value in the list.

"browserslist": {
    "production": [
      "supports bigint",
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Upvotes: 0

JSON Derulo
JSON Derulo

Reputation: 17522

You can prevent the error by adding es2020.bigint to the lib array in your tsconfig.json:

{
  "target": "es2017",
  "lib": ["es2017", "dom", "es2020.bigint"]
}

This should target ES2017, and additionally include the types just for bigint.

Upvotes: 1

Related Questions