Leveraging Dependency Injection to reduce duplicated code in Angular

[phhien203]

How to eliminate duplicated code when getting route params, query params or data from Activated Route in Angular by using dependency injection. Read the article here.

[BharathRavi27]

Thanks for putting it all together. It was indded a good read!

[abductedMind]

You make a good point on factories simplifying testing. BUT...why not use @Injectable to create a single service that holds all these pure function factories rather than injecting providers as factories? Having to manage injection tokens like you suggest implies a possible need to have multiple instances of these factories - the use doesn't align well with the stated premiss of the article.

[phhien203]

Thanks for your feedback, could you please share your code snippets to illustrate your idea?

[abductedMind]

OK, I create an example.

[alexkunin]

Nice article, thank you for sharing!

I think by using some inheritance we can reduce amount of boilerplate even more. E.g. this could be generic part (it could support more configuration options, like all you do you your factory functions, but this is just an example):

@Injectable({
  providedIn: 'root',
})
export abstract class RouteObservable extends Observable<string> {
  protected abstract bag: 'params' | 'queryParams';
  protected abstract property: string;

  constructor(route: ActivatedRoute) {
    super(subscriber => {
      const subscription = route[this.bag].pipe(pluck(this.property)).subscribe(subscriber);
      return () => {
        subscription.unsubscribe();
      };
    });
  }
}

And here is specific value extractor:

@Injectable({providedIn: 'root'})
export class IdQueryParam extends RouteObservable {
  protected bag = 'queryParams' as const;
  protected property = 'id';
}

Finally, this is how you use it in your component:

constructor(id$: IdQueryParam) {
  id$.pipe(takeUntil(this.destroyed$)).subscribe(console.log);
}

So, the most repetitive part is also the shortest (basically moving providers from @Component() to global DI space, and also reusing ES class constructor as DI token).

And in your tests it could be as simple as this:

providers: [
  {
    provide: IdQueryParam,
    useValue: scheduled(of('1234'), asyncScheduler),
  },
],

[konrad-szk]

It doesn't work because ActivatedRoute depends on component. In my POC, params were always empty.

[nikhilkuyya]

so, @konrad-szk to understand, activatedRoute is a service injected with values based on component and routing link right

[konrad-szk]

based on component tree.

[davdev82]

This is really good stuff