reference-core

Document Angular core runtime architecture with LView and TView memory layouts.

Updated Nov 24, 2021
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill reference-core-ishiyan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reference-core
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/angular-reference-core
Command: npx skills add https://github.com/ishiyan/Mbng --skill reference-core-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear mental model and architectural map of Angular's core package to help engineers understand runtime rendering, dependency injection, and change detection.

Core Features & Use Cases

  • High-level overview of render3, DI, and change detection and how they interrelate.
  • Detailed mapping of LView, TView, and the memory layout used by the core runtime.
  • Practical guidance for debugging, modifying packages/core, and reasoning about performance.

Quick Start

Begin by reading the Angular Core mental model to understand how rendering, DI, and change detection are organized in packages/core.

Frequently Asked Questions about reference-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does Angular core architecture handle rendering, dependency injection, and change detection?

Angular core architecture organizes rendering, dependency injection, and change detection through a structured runtime model. It maps how these systems interrelate within packages/core to execute application updates and manage component lifecycles.

What are LView and TView in Angular's core runtime memory layout?

LView and TView are core runtime data structures in Angular's memory layout. LView stores instance-specific state for rendering, while TView holds static template definition data, together enabling efficient change detection and dependency injection.

How do I debug performance issues in Angular's packages/core and render3?

Debug Angular core performance by analyzing the LView and TView memory layout to trace rendering bottlenecks. A comprehensive architectural map helps reason about change detection cycles and identify inefficiencies within render3.

What is the best way to understand Angular dependency injection hierarchies?

The best way to understand Angular dependency injection hierarchies is by studying the core architectural mental model. This clarifies how DI resolution traverses the runtime memory layout to provide services correctly across component trees.

When do I need to understand the Angular core architectural mental model?

You need to understand the Angular core architectural mental model when modifying packages/core, debugging complex runtime rendering issues, or reasoning about performance optimizations within the render3 and dependency injection systems.