I used Angular 18 in my project, and everything worked fine. However, after updating to Angular 19, I started experiencing issues with SCSS transitions and layout rendering. On every route change or browser refresh, the transitions are triggered unexpectedly, making the SCSS appear broken. Additionally, the SCSS loads slower, causing the layout to break. This behavior did not occur in the previous version of Angular, as I confirmed by checking the repository revision before the update. Also problem doesn't occur with tailwindCSS styles. I reverted my project to the commit before the update to v. 19. I checked, and the problem did not occur. Then I updated the project to Angular 19 again, and the issue returned. Edit: SOLUTION!: In the Network tab in DevTools, there is a difference in how the application loads between versions 18 and 19. In version 19, seven stylesheets are being loaded (in my case), whereas in version 18, only three. Running ng serve --no-hmr resolves the issue. I believe it's because these additional 4 stylesheets are loaded too late, causing the SCSS to break for half a second and triggering transitions. Continue reading...
