Why do we need to specify the imports twice in Angular (v. 19+)?

I was asked and couldn't give a good answer to the seemingly redundant syntax in Angular. Someone pointed out that we import the objects from the corresponding files but then again specify those in the field imports of the component's decorator. What is the technical reason for that?

I also noticed that the above isn't true for e.g. enumerators (since Env, being one, requires no mention in the decorator). I sense it has to do with the fact that those are classes but I'm not sure and couldn't confirm nor reject that claim.

import { Env } from "@models/general";
import { LanguagePipe } from "@services/language.pipe";
import { IconDevComponent } from "@icons/icon-dev.component";

@Component({
selector: "my-component", ...,
imports: [LanguagePipe, IconDevComponent, ...]

})
export class MyComponent {


Why can't we have a syntax that implicitly adds whatever is needed from the list of imports to the decorator (and using tree shaking at build to get rid of the supoerfluous ones)?

Continue reading...