SyntaxError from acorn, when embedded in Angular app #7957
Description
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:
