I’d like to mention a caveat when working with angular.
It uses zone.js as it’s change detection strategy. This means that zone.js hooks onto requestAnimateFrame, and runs angular’s change detection on each tick.
This is very expensive and you will notice a big performance degradation.
What you need to do is to create a new file in the src folder called ngzone-flags.ts
which you import at the top of your polyfills.ts file.
in this file you should have this:
(window as any).__Zone_disable_requestAnimationFrame = true; (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'touchmove'];
This will tell zone.js to not hook these events.
To check if it worked you can use the performance panel in chrome and run in for a while, to then check the callstack for each request animate frame.
There should be no call to zone.js in there.
Hope this helps as it took me a while to realize why my threejs apps where running so slow in angular
It could potentially break other angular libraries that are dependant on these events, so keep that in mind.