Do you think the title needs clarification? Feel free to offer suggestions.
I've noticed that my design components are ending up with a lot of imports. Some of these imports are duplicated in the component that is importing them. I'm managing to make it work but there's a nagging feeling of code smell creeping in.
Let's say we want to give a monkey a banana.
import { Banana } from "./banana";
@Component
export class Monkey { }
Now, let's say some guy wants to own a monkey.
import { Monkey } from "./monkey";
@Component
export class Dude { }
But what if this guy is also hungry and wants a banana for himself?
import { Monkey } from "./monkey";
import { Banana } from "./banana";
@Component
export class Dude { }
This situation seems inefficient and redundant to me. The second import seems unnecessary since the guy already has access to a banana through the monkey.
Is this the proper way to structure import hierarchy in Angular? Or is there a more efficient way to reduce the amount of scrolling required when dealing with numerous imports in each file?
If there isn't a better solution, I would love to hear the reasoning behind this practice as a point of reference.