Tag Archives: overengineering

Overengineering with Angular InjeсtionToken

Photo by ThisisEngineering on Unsplash

When I have enough material I write technical articles, but sometimes for the subject a small blog post is a much more suitable genre.

Almost every day I look for something new on Medium, Dev.to or other sources to track the context of average topics of average daily software development. Once I stumbled upon an article about using such a feature of Angular as InjectionToken. It is being used quite often and it helps to resolve situations when additional flexibility should be added to DI.

Some of provided in article examples looked as following (the code is changed, but the idea is left):

import { InjectionToken } from '@angular/core';

export const BIG_BOX_COOKIE_AMOUNT = new InjectionToken<number>('BIG_BOX_COOKIE_AMOUNT');

@Component({
  standalone: true,
  selector: 'cookies',
  template: "Cookies left: ...",
  providers: [{
     provide: BIG_BOX_COOKIE_AMOUNT,
     useFactory: () => 5 * 30 // amount of packs in a box * amount of cookies in a pack
  }]
})
export class CookiesComponent {
  constructor(@Inject(BIG_BOX_COOKIE_AMOUNT) initCookieAmount: number) {}
  // Logic of CookiesComponent
}

I understand that the intention of the author was good — to show the power of the feature, but in such a case the value (cookie amount) can be provided simply with a constant and the described feature is not relevant. A better example is needed.

When newcomers see examples they start to reproduce the approaches in their projects assuming them as normal practices. We all at some point can overengineer our code. But probably we should keep in mind that sometimes we need to think twice before committing the code if we can simplify it.