# 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.