SyntaxError from acorn, when embedded in Angular app

Most appropriate sub-area of p5.js?

• Other (specify if possible)
• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors

p5.js version

2.0.3

Web browser and version

Chrome 138.0.7204.93

Operating system

MacOSX

Steps to reproduce this

Below is the error I see, when I tried with an Angular app.

Angular Version: 20.0.0

Angular Component:

import p5 from 'p5';


declare global {
  interface Window {
    myP5: p5;
  }
}

@Component({
  selector: 'app-p5-canvas',
  standalone: true,
  template: "<div #canvasContainer></div>",
  styleUrls: ['./p5-canvas.component.css']
})
export default class P5CanvasComponent implements OnInit, OnDestroy {
  @ViewChild('canvasContainer', { static: true }) canvasContainer!: ElementRef;
  private p5Instance!: p5;

  @Input() ellipseColor = 'dodgerblue';

  ngOnInit(): void {
    this.createP5();
  }

  ngOnDestroy(): void {
    this.destroyP5();
  }

  private createP5() {
    const ellipseColor = this.ellipseColor; // Save to closure

    const sketch = (p: p5) => {
      p.setup = () => {
        p.createCanvas(400, 300).parent(this.canvasContainer.nativeElement);
        p.background(245);
      };

      p.draw = () => {
        p.fill(ellipseColor);
        p.strokeWeight(0);
        p.ellipse(p.mouseX, p.mouseY, 40, 40);
      };
    };

    this.p5Instance = new p5(sketch);
    window.myP5 = this.p5Instance;

  }

  private destroyP5() {
    if (this.p5Instance) {
      this.p5Instance.remove();
    }
  }
}

Error:

Reproduce the reported Angular 20 integration using p5.js 2.0.3 and the Angular component shown in the issue. Start by inspecting the acorn SyntaxError and the package or build step that reports it; compare behavior in a minimal Angular app. Done means the component imports and runs without the reported error.