Standalone components declare their template dependencies directly. Importing a class into TypeScript alone does not make its directive or component available in the template.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: A standalone page imports the reusable card component in its component metadata. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Inspect the template
Find the unknown selector and the component that declares it. TypeScript imports alone do not expose template dependencies.
Step 2: Register the dependency
Add the standalone component to the consuming component’s imports, or import an NgModule that exports it.
Step 3: Verify the contract
Check selector spelling and required inputs. Avoid broad schemas that merely silence an actual missing dependency.
Worked scenario
A standalone page imports the reusable card component in its component metadata.
A page displaying <app-card> imports CardComponent in its decorator’s imports array. Importing CardComponent at the file top only makes the identifier available to TypeScript; the metadata makes it usable in that page’s template. A similarly named selector belonging to another component will still fail or render the wrong feature.
Common mistake
Adding unrelated imports can conceal the actual missing template dependency.
Verify the behavior
Compile the template and exercise a required card input. Remove the metadata import to confirm the check detects the missing dependency.
Interview exercise
Diagnose an unknown element error.
Answer and reasoning
Check the component selector, standalone imports and any exporting NgModule before changing schemas.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.