Custom angular libraries that are tree-shakable

[winter veldt]

Hello!

I have built a custom angular library that's currently on v17.3.12. It contains several stand-alone components. I'm struggling to make it tree shakable and am not sure where else to look. Is there anyone here with experience building custom libraries that could help me out?

I've followed several tutorials, including this one:
https://angular.dev/tools/libraries/creating-libraries#refactoring-parts-of-an-application-into-a-library

Each component is in its own separate module. For example:

icon.module.ts
@NgModule({
declarations: [
IconComponent
],
imports: [
CommonModule
],
exports: [
IconComponent
]
})
export class IconModule {}

This module is then exported at the root module.ts file. The file public-api.ts also exports icon.component.ts.

The application that uses this library will include code for this icon component whether it uses it or not. Is there someone who would be able to guide me through this? I think I'm close, but have got to be missing something simple.

Thanks,
The Ben

[viscid nest]

This should work fine. But why don't you really make your components standalone? All these modules could then be removed.

[winter veldt]

@viscid nest What do you mean by that? Do you mean create a separate project for each component?

Also, if this should work fine, do you have any suggestions about why it isn't? Is there anything more about our setup that would help troubleshoot this? My application's bundles are including code from my shared library that it isn't using :/.

[viscid nest]

No, I mean standalone components, which don't need to be declared in modules:

@Component({
  standalone: true
  // ...
}

https://angular.dev/guide/components/importing#standalone-components

[winter veldt]

@viscid nest Thanks for the feedback. I've switched one of my components to be standalone, and it is still part of my application's build even though it's not referenced :/.

With my component being standalone, I've also removed the reference from public-api.ts.

Any other ideas about why tree-shaking isn't working?

[viscid nest]

No. How do you test it though? Any reproduction available (as a github project)?

[winter veldt]

Unfortunately, no. It's a private project for my company. Would it be possible to set up a private video call? Are you someone who is familiar with tree-shaking that could provide some insights?

I could also provide various code snippets if that helps.

[viscid nest]

No to all questions 🙂

[winter veldt]

Ok, thanks for your responses though. Hopefully there will be someone else on here with some ideas. I'm not sure where best to get answers as there isn't a lot of information out there on this topic.