You might be using a SharedModule to share components between different modules of your application 🤔

In most cases it will cause issues with tree shaking and bundle size of your modules 🍃

Let’s explore why, and what might be the possible alternatives 👇 You have a simple app, with landing, contact, and a blog page.

All of them render the button component.

Since you need to share the button between multiple pages, you decide to create a SharedModule with this component.

SharedModule is then imported in all 3 pages.

If you are still using ng-deep to style child components you really should consider the alternatives.

Host styling, content projection, and CSS variables are all potential solutions for this common problem.

Let’s explore the options below 👇

#Angular First a couple of words why we need ng-deep in the first place.

In Angular, component's styles are encapsulated within the component's element so that they don't affect the rest of the application.

That has a side effect of making it difficult to style child components.