The local component scope of a standalone Angular component is managed by listing declarable dependencies in the Component.imports metadata option.

Playful Programming

Standalone Angular components manage their own local component scope by listing declarable dependencies (components, directives, pipes) directly in the Component.imports metadata option, rather than relying on NgModules. This approach creates a direct dependency graph between a component and its declarables, contrasting with the classic NgModule approach where transitive compilation scopes can balloon to 52+ declarables when only a few are actually used. The post walks through a hero detail component example using NgIf, UppercasePipe, and FormsModule, explains the dependency graph differences, and argues that standalone components are easier to maintain because the template's dependencies are explicit and directly traceable.

The local component scope of standalone Angular components

Declarable dependencies Copy link Link copied!

Local component scope Copy link Link copied!

Transitive compilation scope Copy link Link copied!

Maintaining declarable dependencies Copy link Link copied!