What are tree shakeable providers?

When we register providers in @NgModule(), angular internally includes all those related classes in the final bundle, irrespective of their actual use in the application. To overcome this, it is recommended to use @Injectable() decorator when creating a service as below:

@Injectable({
  providedIn: 'root'
})
export class MyShakeableService {
  // some logic
}

This enables the Angular to inspect which services are actually being used in the application and 'exclude' unused service classes from the final bundle - there by reducing the bundle size. These kind of providers are called as 'tree shakeable'. This was introduced in Angular 6.

When we register providers in @NgModule(), angular internally includes all those related classes in the final bundle, irrespective of their actual use in the application. To overcome this, it is recommended to use @Injectable() decorator when creating a service as below:

@Injectable({
  providedIn: 'root'
})
export class MyShakeableService {
  // some logic
}

This enables the Angular to inspect which services are actually being used in the application and ‘exclude’ unused service classes from the final bundle – there by reducing the bundle size. These kind of providers are called as ‘tree shakeable’. This was introduced in Angular 6.

Default image
Sriram Mannava

I'm a full-stack developer and a software enthusiast who likes to play around with cloud and tech stack out of curiosity.

Leave a Reply