5 lines
3.0 KiB
JSON
Raw Normal View History

{
"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-->"
}