5 lines
3.0 KiB
JSON
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"id": "errors/NG0300",
"title": "NG0300: Multiple components match with the same tagname",
"contents": "<h1 id=\"ng0300-multiple-components-match-with-the-same-tagname\">NG0300: Multiple components match with the same tagname<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0300#ng0300-multiple-components-match-with-the-same-tagname\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/errors/NG0300.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"error-video-container\">\n <iframe src=\"https://www.youtube.com/embed/z_3Z5mOm59I\" frameborder=\"0\" allow=\"accelerometer; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n</div>\n\n\n\n<div class=\"content\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0300#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Two or more components use the same <a href=\"guide/component-overview#specifying-a-components-css-selector\">element selector</a>. Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular.</p>\n\n</div>\n<br>\n<div class=\"debugging\">\n <h2 id=\"debugging-the-error\">Debugging the error<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG0300#debugging-the-error\"><i class=\"material-icons\">link</i></a></h2>\n <p>Use the element name from the error message to search for places where youre using the same <a href=\"guide/architecture-components\">selector declaration</a> in your codebase:</p>\n<code-example language=\"typescript\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'YOUR_STRING',\n ...\n})\n</code-example>\n<p>Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.</p>\n<p>If youre 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 <a href=\"guide/styleguide#component-selectors\">best practices</a> for your selectors to prevent collisions.</p>\n\n</div>\n\n<!-- links to this doc:\n - errors\n-->\n<!-- links from this doc:\n - api/core/Component\n - errors/NG0300#debugging-the-error\n - errors/NG0300#description\n - errors/NG0300#ng0300-multiple-components-match-with-the-same-tagname\n - guide/architecture-components\n - guide/component-overview#specifying-a-components-css-selector\n - guide/styleguide#component-selectors\n - https://github.com/angular/angular/edit/master/aio/content/errors/NG0300.md?message=docs(...)%3A%20describe%20your%20change...\n-->"
}