how can i set up angular three and three js in an angular project

I'm trying to integrate Three.js with Angular using the @angular-three/core package in a new Angular 19 project, but I'm facing persistent dependency version conflicts. Here's my environment:

Angular CLI: 19.0.0

What I've tried:

Fresh Angular project: ng new

Installing Three.js: npm install three

Adding Angular Three: ng add angular-three

Manual version combinations: npm install three@0.173.0 @types/three@0.173.0 npm install @angular-three/core@3.7.2 --legacy-peer-deps Errors encountered: npm ERR! code ERESOLVE npm ERR! peer three@">=0.148.0 <0.173.0" from angular-three@3.7.2 npm ERR! Could not resolve dependency: three@0.173.0 npm ERR! code ETARGET npm ERR! notarget @angular-three/core@7.0.0 (invalid version) Key questions:

What is the correct version combination of Angular/Three.js/@angular-three-core for Angular 19?

Is there an official compatibility matrix for these packages?

enter image description here

Continue reading...