I have a regular Angular project and I want to convert it in an Angular elements project.
My main goal is to have separated build files for each component/element.
- login/main.js
- header/main.js
- footer/main.js ....
At this moment and following the Angular documentation I have achieved this but when I build my project I get a single main.js file that I need to import in the hosting project.
1st question. As I will be adding lots of elements into the Angular project, if I follow this approach, this will be inefficient as every time that I use an Angular element the entire main.js file (containing all the elements) will be loaded. Is this assumption correct?
So, to avoid that I need to build the project in a way that I can have separated Angular elements. I've been following this article but no luck so far. My element doesn't render into the hosting project.
Questions:
- How to build separated Angular elements into different folders or files?
- If all the elements are inside one single file, does this mean that every time a element is called, the entire file will be loaded?
- Is there a different way to achieve this?
If someone has experienced this issue and can give me some directions I would appreciate.