The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →NG2009 is an Angular compiler error raised when a component that uses ViewEncapsulation.ShadowDom has a selector that is not a valid custom element tag name. The fix is to rename the selector so it meets those naming rules. Angular’s own example changes comp to app-comp.
What the error means
Angular’s official error page for NG2009 gives the plain-language cause: “The selector of a component using ViewEncapsulation.ShadowDom doesn’t match the custom element tag name requirements.” Angular: NG2009 — Invalid Shadow DOM selector is the primary reference, and the title it uses is “Invalid Shadow DOM selector,” classified as a compiler error in the Angular Error Encyclopedia.
As an Amazon Associate I earn from qualifying purchases.
The error is about the component’s selector, not about the shadow DOM feature itself. With Shadow DOM encapsulation, Angular creates the component as a real custom element in the browser, so its selector has to follow the same rules browsers apply to custom element names.
The naming rules
According to the NG2009 page, a selector used with ViewEncapsulation.ShadowDom must meet three conditions:
#1 Best Overall
- It is lowercase.
- It contains a hyphen.
- It begins with a letter from
atoz.
A selector such as comp fails because it has no hyphen. A selector such as MyComp fails because it is not lowercase. Either one triggers NG2009 when the component uses Shadow DOM encapsulation.
How to fix NG2009
- Open the component file that triggers the error. Search the project for
ViewEncapsulation.ShadowDomif the error message does not name the file. - Find the
selectorproperty inside the@Componentdecorator. - Rename the selector so it is lowercase, contains at least one hyphen, and starts with a letter. Keep the prefix consistent with the rest of your project, for example
app-. - Update every template that uses the old selector name, such as
<comp>, so it matches the new name. - Save the file and rebuild or restart the development server, then confirm the compiler error no longer appears.
The before-and-after from Angular’s example looks like this:
// Invalid: no hyphen
@Component({
selector: 'comp',
encapsulation: ViewEncapsulation.ShadowDom
})
// Valid: lowercase, hyphenated, starts with a letter
@Component({
selector: 'app-comp',
encapsulation: ViewEncapsulation.ShadowDom
})The change to the selector also changes how the component is written in parent templates. If the template contains <comp>, it must become <app-comp>, or Angular will not render the component.
When the selector already looks correct
If the selector already meets all three rules and NG2009 still appears, check that you are looking at the component the compiler reports. Duplicate component files, a copied decorator in a different folder, or a stale build output can all point you at the wrong selector. The NG2009 page itself describes only the selector rule, so for any other cause, compare your code against the current Angular error reference.
Rank #3
Why the hyphen rule exists
Shadow DOM encapsulation in Angular relies on the browser’s custom element mechanism. Custom element names are required to contain a hyphen, and that requirement is what distinguishes them from built-in HTML tags. Angular enforces the same constraint at compile time so that the error appears during the build rather than as a silent rendering problem in the browser.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Quick checklist
- The selector is in lowercase.
- The selector contains a hyphen.
- The selector starts with a letter from
atoz. - Every template that uses the component uses the new selector.
Applying these checks resolves the error that the NG2009 page documents.
Quick Recap
“
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
