-2

Angular application: Opening viewsource html in the browser, it's dynamically adding inline style css tags as we browser cross different components in the page. Why does angular do this (lazing loading)? is there a way to separate it out rendering in a separate css file ?

Jam
  • 39
  • 1
  • 7
  • are you looking for solution or ..? to understand the basics. If you have some errors then post the code. someone can help you out. – cantona_7 May 14 '19 at 09:17

1 Answers1

2

Yeah, I'm not sure what you're saying but I will explain the basics to you.

Angular relies on webpack to bundle your application.

When it bundles it, it does two things for CSS files :

1 - Get the files in the styles array of your angular.json file and builds a CSS chunk for your application (that is then added to your <head>

2 - Bundles every component-specific style into a JS chunk that can be lazy loaded.

This means that your global styles are loaded when the page is loaded, but the lazy loaded module styles are loaded only when the said module is being loaded.

If this isn't clear or doesn't answer your question, please let me know.