How do I register a new component

Hi,
I created a new extension and added a new component inside it.
In the extension.module.ts file, it is registered as follows:
sidebarWidgetRegistry.register(‘default’, ‘x-widget’, SidebarWidgetComponent);

In PHP files like detailviewdefs.php, when I add it under sidebarWidgets using ['type' => 'x-widget'], it works fine.
However, when I try to use it in any other components .html file by calling it as an Angular component <x-widget></x-widget> , the rebuild process fails with the following error:
error NG8001: ‘x-widget’ is not a known element:
If ‘x-widget’ is an Angular component, then verify that it is part of this module.

So, I think the problem is in the ExtensionModule > constructor. We should register the component using a different method than sidebarWidgetRegistry. Any ideas?

We should import both component and module in the component where we want to use it like one shown below

import {HelloWorldSidebarWidgetModule} from './containers/sidebar-widget/hello-world/hello-world-sidebar-widget.module';
import {HelloWorldSidebarWidgetComponent} from './containers/sidebar-widget/hello-world/hello-world-sidebar-widget.component';

If you import it like this and run the yarn run build:core, it will fail.

The build command depends upon the package in which we make changes. We should make changes in the extension like ‘defaultExt’. If this package is changes, we need to run just ‘yarn run build:defaultExt’, If you have your component in defaultExt and trying to use in ‘core’ , then it is not valid and show error. If you are have a component in ‘core’ and you can use it in ‘defaultExt’. Could you please help to understand if this is not the case.

I need to add a widget to the core/navbar.
So created a new extension with a new component (which will serve as the widget). The issue is figuring out how to use this new extension/component inside the core/navbar.

Can you please refer these files.
core\app\core\src\lib\components\navbar\navbar.registry.ts
core\app\common\src\lib\components\registry\base-component.registry.ts

The signature of register method is as follows.

public register(module: string, type: string, component: Type<T>): void {
        this.map.addEntry(module, BaseComponentRegistry.getKey(type), component);
    }

In the extension module class we can register a new component in NavbarRegistry similar to sidebarWidgetRegistry.

1 Like

widget.component.ts
export class WidgetComponent extends BaseNavbarComponent { constructor() {} }
extension.module.ts
constructor(protected navbarRegistry: NavbarRegistry) { navbarRegistry.register('default', 'x-widget', WidgetComponent); }
base-navbar.component.html
<x-widget></x-widget>

yarn run build:core
:heavy_multiplication_x: Compiling with Angular sources in Ivy full compilation mode.
core/app/core/src/lib/components/navbar/base-navbar/base-navbar.component.html:249:13 - error NG8001: ‘x-widget’ is not a known element:
If ‘x-widget’ is an Angular component, then verify that it is part of this module.
If ‘x-widget’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

Please check the selector name (example selector: ‘scrm-record-panel’) in the component file.
@Component({
selector: ‘scrm-record-panel’,
templateUrl: ‘./record-panel.component.html’,
styleUrls: ,
})

widget.component.ts
selector: 'x-widget'
The selector name is correct. I also tried adding super() in the constructor, but it shows this error.

Do we have any general base component to extend from?
The BaseNavbarComponent requires a lot of arguments.