fb58a2bd54
Previously, some of the links on the error pages had URLs prefixed with `https://angular.io/`. This caused them to be treated as external URLs, which had the following downsides: - Links would always point to `angular.io` instead of the same version as the error page (e.g. `next.angular.io` or `v11.angular.io`). - Dgeni would not be able to check that the URLs are valid (i.e. point to existing pages). - An external link icon would incorrectly be shown next to the links on `angular.io`. This commit fixes the links to use relative URLs. PR Close #40881
22 lines
1.1 KiB
Markdown
22 lines
1.1 KiB
Markdown
@name Selector Collision
|
||
@category runtime
|
||
@videoUrl https://www.youtube.com/embed/z_3Z5mOm59I
|
||
@shortDescription Multiple components match with the same tagname
|
||
|
||
@description
|
||
Two or more components use the same [element selector](guide/component-overview#specifying-a-components-css-selector). Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular.
|
||
|
||
@debugging
|
||
Use the element name from the error message to search for places where you’re using the same [selector declaration](guide/architecture-components) in your codebase:
|
||
|
||
```typescript
|
||
@Component({
|
||
selector: 'YOUR_STRING',
|
||
...
|
||
})
|
||
```
|
||
|
||
Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
|
||
|
||
If you’re having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](guide/styleguide#component-selectors) for your selectors to prevent collisions.
|