CODEWITHSUNDEEP
htmlcssangularview-source
Jam
Jam

Reputation: 39

How does angular inject component specific styles into <header> tag of the html? is there way to package css into files

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 ?

Upvotes: -2

Views: 1203

Answers (1)

user4676340
user4676340

Reputation:

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.

Upvotes: 2

Related Questions