# AUR0752

## Error Message

`AUR0752: Element <element-name> is not registered in <component-name>.`

Where `<element-name>` is the name of the custom element used in the template, and `<component-name>` is the name of the component whose template is being rendered.

## Description

This error occurs during the rendering phase when Aurelia tries to process a custom element used in a template (e.g., `<my-element></my-element>`), but it cannot find the corresponding definition for that element (`my-element`) within the resources registered for the current component or globally.

## Cause

The common causes for this error are:

1. **Missing Import:** The custom element class was not imported into the component's view model file where its template is being used.
2. **Missing `dependencies` Array:** The custom element was imported, but it was not included in the static `dependencies` array of the component's definition or the `@customElement` decorator's `dependencies` option. Aurelia relies on this array to know which resources are needed for the template.
3. **Typo in Element Name:** The name used in the template (e.g., `<my-elemnt>`) does not exactly match the registered name of the custom element (e.g., `my-element`). Element names are case-insensitive in HTML but often defined with kebab-case.
4. **Incorrect Registration:** The custom element might be defined in a separate package or file but was not correctly registered globally (using `Aurelia.register(...)`) or locally via the `dependencies` array.
5. **Build/Bundling Issues:** The build process might not be correctly including or bundling the custom element definition, making it unavailable at runtime.

## Solution

1. **Import the Element:** Ensure the custom element class is imported in the view model file (`.ts`) of the component using it.
2. **Add to Dependencies:** Add the imported custom element class to the `dependencies` array in the component's definition.

   ```typescript
   import { MyElement } from './my-element';
   import { customElement } from 'aurelia';

   @customElement({
     name: 'my-component',
     template: `<my-element></my-element>`,
     dependencies: [MyElement] // <-- Add here
   })
   export class MyComponent { }
   ```

   Or, if using a static property:

   ```typescript
   import { MyElement } from './my-element';

   export class MyComponent {
     static dependencies = [MyElement]; // <-- Add here
     // ... rest of the component definition
   }
   ```
3. **Verify Name:** Double-check the element name used in the template matches the name defined in the `@customElement` decorator or the element's definition. Remember standard HTML practice uses kebab-case (e.g., `my-element`).
4. **Check Registration:** If the element comes from another package or is intended for global use, ensure it's registered correctly with the Aurelia instance (`Aurelia.register(MyElementConfiguration)`).
5. **Verify Build:** Ensure your build/bundler configuration is correctly processing and including the custom element file.

## Debugging Tips

* Check the browser's console for the exact error message, noting the element name and the component name.
* Verify the import path for the custom element in the view model.
* Confirm the element class is present in the `dependencies` array.
* Search the codebase for the custom element's definition to ensure the name matches.
* Look at the compiled/bundled output in the browser's developer tools (Sources tab) to see if the element's code seems to be present.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0752.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.