Skip to content
tezvyn:

What is Angular Ivy's 'locality' and its benefits over View Engine?

Source: github.comMediumHow cards are made

What is Angular Ivy's 'locality' and its benefits over View Engine?

Tests Ivy's per-file compilation model. Locality compiles decorators to static properties without global knowledge, except components need their NgModule scope, speeding builds and tree-shaking.

What's really being asked

Whether you understand the Ivy compilation model's core principle of locality and how it differs from View Engine's global program analysis. Interviewers want to see that you know Ivy compiles Angular decorators into self-contained static properties per file, and that you can articulate the concrete build-time and bundle-size benefits that result.

The full answer

First, a crisp definition of locality. Explain that under Ivy, decorators like @Injectable compile to static properties on the class itself, for example ɵprov, using only the metadata present in that single file. Second, acknowledge the one exception to pure locality: @Component compilation requires knowledge of the declaring @NgModule's scope, specifically the transitive closure of selectors from that module's imports and exports, to generate the ɵcmp definition. Third, contrast this with View Engine, which relied on global program knowledge and shipped .metadata.json sidecars alongside compiled JavaScript to preserve decorator information. Fourth, enumerate the three practical benefits asked for: tree-shaking improves because unused classes and their metadata are no longer entangled in global sidecars and can be dropped by bundlers; compilation speed increases because the compiler can work incrementally file-by-file without re-analyzing the whole program; and bundle size shrinks because dead code elimination is more effective and the extra metadata files are eliminated.

The mistakes people make

Confusing locality with style encapsulation or component-level DOM scoping. Claiming that Ivy still requires .metadata.json for all libraries. Asserting that @Component is fully local without mentioning the @NgModule selector scope exception. Describing the benefits only in vague terms like faster without explaining the mechanism, or attributing bundle size wins solely to the runtime rather than the compiler model.

What usually comes next

How does ngcc bridge the gap for pre-Ivy libraries on NPM? What happens if a component is declared in multiple NgModules? How does the locality principle affect library authors shipping Angular Package Format? Can you explain the difference between ngtsc and ngcc?

A concrete example

In View Engine, publishing an @Injectable service to NPM required a .metadata.json file so that downstream compilers could understand its provider configuration. If an application imported the library but never injected that service, the metadata still had to be parsed and shipped because it was part of a global graph. In Ivy, the service carries its provider definition as a static ɵprov property directly on the class. If the application never references the class, a bundler like Webpack or Rollup can tree-shake the entire class and its definition away, reducing parse time and bundle size with no orphaned metadata files.

Interview question

Which statement accurately describes Ivy's locality principle and its main exception?

  • a.Ivy retains View Engine's global program analysis but stores the results in inline static properties instead of separate .metadata.json files.
  • b.Ivy converts decorators into static properties on the class using local file metadata, though @Component still requires its declaring @NgModule's selector scope.Correct
  • c.Ivy compiles all decorators using only per-file metadata with no external dependencies, eliminating .metadata.json files entirely.
  • d.Ivy's locality refers to component-level DOM scoping, where styles and metadata are isolated to each component's subtree.
Why?

Ivy compiles decorators like @Injectable into self-contained static properties using only that file's metadata, but @Component is the exception—it needs the declaring @NgModule's selector scope to generate ɵcmp. Distractor A is tempting because it correctly captures the elimination of .metadata.json files but wrongly asserts that all decorators are purely local, ignoring the @NgModule scope requirement for components.

Just read this? Test yourself on what you have been reading.

Read the original → github.com

You just looked this up. Could you explain it out loud?

That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.

See open roles