Angular 2 css styles

Question

I am writing an angular2 application using angular-cli. I follow the structure like - global styles are imported/put in styles.scss which is specified in angular-cli.json -> styles: [] - each component will have its own scss Everything is working fine

However, I have been told that when build and run the application, those styles will be converted to inline styles and inserted to header of main html file (index.html). I have inspected index.html while running the app and saw many inline-style sections are inserted in. Also people told me the solution is putting all in one css file and put a link in index.html, that big css file will be downloaded and cached, which will give user a faster loading performance for the next uses However I rarely see any angular2 application designing with this solution, I think it must have a reason behind that I dont know Anyone please give me an explanation

Answer 1

I guess it's all about compiliation type. There is AOT (Ahead Of Time) and JIT (Just In Time). I would suggest you to read about it at angular 2 cookbook they have really nicely described it.

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries.

Creators of angular suggest you to use JIT in development and AOT in production.

Today AOT compilation and tree shaking take more time than is practical for development. That will change soon. For now, it's best to JIT compile in development and switch to AOT compilation before deploying to production.