Module parse failed when using bigint literal in Angular

Question

I am working on a personal project to try and learn the Angular framework. I'm currently a total newbie with it, but I have manage (I think) to include javascript bigint number type correctly in typescript (by targeting the esnext version in the tsconfig.json file) since this works fine :

export class Particule {

  public name: String;
  public amount: bigint;
  public cost: bigint;

  constructor(name: String, amount: bigint, cost: bigint)
  {
      this.amount=amount;
      this.name=name;
      this.cost=cost;
  }

  public increment(): void {
      this.amount += BigInt(1); // <<< this line compiles, no problem
  }

  /* ... */

}

But if I replace the content of the increment() method with : this.amount += 1n; i get the following error :

ERROR in ./src/app/entities/particule.ts 8:24
Module parse failed: Identifier directly after number (8:24)
You may need an appropriate loader to handle this file type.
|     }
|     increment() {
>         this.amount += 1n;
|     }

It's not a rellay 'big' problem (see what I did there :D ) since everything works with the BigInt() call, but I was wondering if there is a way to use straight up bigint literals in my project !

Thanks for the answers.

Answer 1

This is because BigInt isn't yet part of the ECMAScript standard, it is a stage 3 proposal.

Hence TypeScript support is currently restricted to targeting esnext.

If you are targeting esnext, BigInt literals should work. If you aren't, the error message would be:

BigInt literals are not available when targeting lower than ESNext.

Perhaps an old version of typescript is in use?