I'm developing an angular 2 app with angular-cli
angular 2 - 2.1.1
angular-cli - 1.0.0-beta.18
One functionality of the app is it lists down all the events and clicking on one event displays event details in 3 tabs - Overview, Photos & Tickets
The way I've developed this is I've all the events stored in my db and also the content for Overview, Photos and Tickets tabs are in DB. So this way I can just have one component which renders 3 tabs and populates each tab content fetched from DB. Now the interesting bit is most of the events will have same layout and sections, but for some there can be different layout required. So to address this what I'm doing is along with each of the 2 tabs content (overview, photos, tickets), I also store the name of the component which will render this event.
I somehow managed to get the component from the name of the component using ComponentFactoryResolver
and ViewContainerRef
and all works fine, but problem arises when I try to make a build for production environment where angular-cli
kicks tree-shaking and with that all my components which are not actually referenced/imported in the code but are dynamically created/rendered based on the data retrieved from db are dropped and my app crashes since it cannot find those components.
So my question is/are
- Is there a way to exclude certain components from getting removed/dropped during tree shaking?
a. If YES, then how?
b. If NO then what's the alternative?