When following the Angular-cli documentation, all styles included as global-styles end up getting injected into the <head> of the document upon DOM creation. Considering that often global-styles can consist of many lines of code, I'm trying to understand if injection is suitable for large, systematic-design webapps.
I can see the benefits of having styles in the <head> on first load. But what happens on subsequent loads? The browser does not cache inlined or <head> styles, which makes external CSS files a better choice: download once, load from cache from then on. Angular's approach leads to loading the styles (from JS effectively) on every new page load.
Or am I missing something? Perhaps because the <head> styles are rendered from JS, and since Angular's files are downloaded and cached themselves, the styles are in actuality cached too?