My angular application consist of 2 parts based on public and private pages: 1- Landing Page (Before Login) 2- Dashbaord and other Pages (For Authorized User)
Landing page component contain signup/login functionality and some other static html elements.
Both are seprate components and have different stylings. I have already mentioned landing page's styling in it's own style file.
After login user can access multiple pages including dashboard,users pages etc, and they share common stylings, they also have common components like header,sidebar etc, since they all share same styling, i will have to mention it in app component so that it inherit all stylings automatically.
How can i seprate rest of the page stylings with landing page ?
What will be the bets approch to handle this situation?
PS: I was also thinking about creating seprate applications under same project, is this method relevant handling multiple applications with angular cli ?
Yes, having multiple applications makes sense for your case. However, I would recommend keeping login pages free from any framework. We are developing something similar at work. We have login pages with plain html and css. When user logged in successfully, s/he can access angular application. Angular is great and we all love it but it comes with bunch of dependencies you are not aware of. Keeping pages, related to security, free of any framework is better in my opinion. It would mean you have to duplicate stylings for header, footer etc. but it would worth it.
Take a look at this article that is published recently. It lays out a great security risk if you don't know what you are shiping to your users.
P.S: Dependencies of angular are probably OK, however you cannot assume things are safe when it comes to security.