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.