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.
Found this article helpful? Please consider supporting!
