NG0912 warning generated about collision detected

[AStrelkov]

I must be doing something wrong, because I keep getting this warning from Angular (ver. 20.3.6):

_NG0912: Component ID generation collision detected. Components '_CuteIcon' and 'CuteIcon2' with selector 'cute-icon' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://v20.angular.dev/errors/NG0912.

I try to insert a component from my library to markdown text as the following example:

## Usage
...
...
In the next line I try to display Bootstrap's icon as an example:

<cute-icon-ex>grid</cute-icon-ex>
...

In my AppConfig I add the following to providers array:

    ...
    provideDynamicHooks({
      parsers: [
        {
          component: CuteIcon,
          selector: "cute-icon-ex" // with just 'cute-icon' i get the same result
        }
      ]
    })
    ...

CuteIcon component has the selector name "cute-icon" in its decorator object.

Excerpt from my work.component.ts:

    protected parsedContent = signal<string>("");

    constructor() {

        this.contentChanged.pipe().subscribe((value) => {   
           ... 
           // the 'content' was parsed before with Marked.js library
           firstValueFrom( this._dynamicHookService.parse(content) )
              .then(result => {

                this.parsedContent.set(result.element.innerText);  // ???
                this.markForCheck();  
              };
        });
   }

And finally the work.component.html:

<ngx-dynamic-hooks [content]="parsedContent() | safe:'html'">
</ngx-dynamic-hooks>

[MTobisch]

Hey there!

So, it seems you're definitely trying to parse the content twice - once per _dynamicHookService.parse and once again when you set the result as the content input for ngx-dynamic-hooks: <ngx-dynamic-hooks [content]="parsedContent() | safe:'html'">.

Both do the same thing (the ngx-dynamic-hooks component calls dynamicHookService.parse itself under the hood).

So, you can typically just do this

  protected parsedContent = signal<string>('');

  constructor() {
    this.contentChanged.pipe().subscribe(value => {
      this.parsedContent.set(content);
    });
  }

    <ngx-dynamic-hooks [content]="parsedContent()"></ngx-dynamic-hooks>

If you still need to disable sanitization, you can add that on the component, too:

    <ngx-dynamic-hooks [content]="parsedContent()" [options]="{ sanitize: false }"></ngx-dynamic-hooks>

I'm not sure if that fixes the _NG0912 error though, it didn't pop up for me when I tried reproducing your example.

[AStrelkov]

MTobish,

Before I continue, I would like to express my sincere gratitude for your wonderful work. Low bow.
In my first post, I shared excerpts from my classes after several unsuccessful attempts to implement my initial concept. The first versions of the classes looked like this:

Excerpt from my work.component.ts:

   protected parsedContent = signal<string>("");

    constructor() {

        this.contentChanged.pipe().subscribe(() => {   

           // For the beginning I apply 'marked.js' parsing 
           this.parserService.parseMarkdown(this.contentSource, this.options)
             .then(value => {

                // then parsing with your library
                firstValueFrom( this._dynamicHookService.parse(value) )
                  .then(result => {

                     this.parsedContent.set(result.element.innerText);  // ***

                     this.markForCheck();
                  
                 });
          })

and my work.component.html was:

<div class="content-markdown"
    [innerHTML]="parsedContent() | safe:'html'">
</div>

The others are the same.

But, after serving I received NG0912 warning too. In addition and it's no less important to me, I have not idea for while, how to properly apply the parsing result of your library to the parsing result of the marked.js. So, I marked the questionable line with the "***" symbols.

Ultimately, I want to display markdown text on the screen with a dynamically added component from my library. In this case, cute-icon.

[AStrelkov]

I need to provide some additional explanation for my project.
The component I'm playing with actually has a wrapper component above it, which also uses the cute-icon component and has it in its imports array. Therefore, I conducted another experiment. I created a separate component called CuteIconEx1 (cute-icon-ex1) and used it in the parsers.

CuteIconEx1 template:

<cute-icon color="primary">grid</cute-icon>

AppConfig:

  ...
    // form AppConfig.ts

    provideDynamicHooks({
      parsers: [
        {
          component: CuteIconEx1,
          selector: "cute-icon-ex1" 
        }
      ]
    })
    ...

Markdown:

## Usage
...
...
In the next line I try to display Bootstrap's icon as an example:

<cute-icon-ex1></cute-icon-ex1>
...

As a result, the error was resolved. So I understand that ngx-dynamic-hooks doesn't see/analyse the fact that the component's class is already used somewhere in the project or component injector hierarchy. And if that's the case, is there a way to solve this problem at the your library level?

BUT, the second issue is not resolved. The questionable line in the previous example not only failed to display an icon on the screen, but also completely broke the output of the formatted markdown text, which was pretty predictable. How do you see a solution to this problem, because I don't have any ideas yet?

[MTobisch]

Hello again,

thank you so much for the kind words :-]

As for the problem, I really have trouble reproducing it on my side. The library doesn't redeclare or import the components you hand to it via provideDynamicHooks, it just uses them to create instances of them by using the native Angular methods. So I'm puzzled as to why it would say that the component class effectively exists twice. It should be the same class that is used anywhere else.

In my minimal test setup, I'm importing und using the CuteIcon component normally in the template of the main app component, then again in a child component (work component), then again in the content variable handed to this._dynamicHookService.parse(value) - and all three version load and work fine.

Though as I said, it would be better to just hand the parsed markdown to the <ngx-dynamic-hooks>-component as its content input rather than parsing it via DynamicHookService. If you do use DynamicHookService, you should use result.element directly and insert it somewhere in the DOM, rather than just taking result.element.innerText or innerHTML, because result.element already has the components loaded inside it and by taking just the stringified version of the HTML, the components won't work anymore.

The other difference is that I'm not using any markdown parsing library - but it should just produce parsed HTML returned as a string, right? So nothing special?

Perhaps you could give me a minimal example of your code that reproduces the problem and I'll troubleshoot it for you?

[AStrelkov]

Marvin,

We have a saying: "If you want to solve a problem, tell someone else about it". The problem actually was with the imports that were automatically added to my AppConfig file and differed from the paths configured in angular.json. When I adjusted them, everything worked as expected. So, my sincere apologies for the false alarm.

BUT.
In following Markdown text I intentionally made a mistake in the first line of cute-icon and skipped the closing quotation marks after primary value:

## Usage
...
...
<cute-icon color="primary> grid-fill </cute-icon>
<cute-icon fontIcon="grid"></cute-icon>
<button cuteButton="outlined" color="success">Hello World!</button>

The output was unexpected for me: neither the first nor the second cute-icon option was displayed. Only the button.
Although the description of the second cute-icon is correct. Ideally, I would like to have an error in the definition of one of the components does not affect the rest. Is there any way to fix this?

[MTobisch]

Hey Alexander,

hm, it seems my result is somewhat different. It looks like this for me after loading:

The first missed quotation mark makes the browser effectively extend the color-Attribute up to right before it says "grid", and then the </cute-icon> that follows closes the element again. So the two cute-icon elements have effectively merged into one. The library picks up that single cute-icon element and loads the component into it.

So this is mostly just the native browser behaviour before my library even gets to really interact with the element. As to why not even a single component loads, I'm not sure. Is the selector correct?

[AStrelkov]

Marvin,

Now I understand what happened: for the first cute-icon, the icon color became "primary ... fontIcon=" and the icon name became "grid ... </span>", which is of course not included in the Bootstrap's icon set. Many thanks for the visual test.

Another question from a different area:
Have you tried to re-build your library for the latest version of Angular 20.3.x. I made an attempt - the upgrade and build were successful, but in the end it didn't work, some errors started to appear when starting the project, and tests with TestBed.get(...) links also didn't work.

[MTobisch]

Hey Alexander,

sorry for the late answer, I had a busy couple of days and honestly kind of forgot.

Do you mean actually rebuilding the library by itself from the source code in this repo (as opposed to as a part of your project)? If so, I haven't done that yet for Angular 20.3.x since the older library build seemed to work fine with more modern Angular versions.

Was there a particular problem when using the library with an Angular 20.3.x project that caused you to do that or were you just trying it out?

[AStrelkov]

Hello Martin,

Yes, I tried to re-build your library with the latest version of Angular, because of the constant errors I was getting, which is why I started this topic. As a result, I didn't succeed, and I got some startup failures, but I didn't bother to investigate them because I found the cause of my issue elsewhere. You might be right, and there might not be much point in re-building if everything is working fine.

I have some new questions about passing the context object into the dynamically-loaded component. The excerpt from the documentation:

The context object is typically a simple object literal that provides some values of interest from the parent component, but it can technically be anything - even the parent component itself.

My questions are:

• Can it be a signal, and what happens when the signal's value changes?

• And if the context is a plain object and any of its properties updated, should I change context something like this.myContext = {...this.myContext} for change detection to work ? And what if the component itself has ChangeDetectionStrategy.OnPush?

[MTobisch]

Hey again,

to address your questions:

1. Can the context object be a signal?

Yes, it can be, though for improved change detection, I would currently recommend to pass the value of that signal to the library (as the "context" input) rather than the signal itself, like so:

context = signal({
  testValue: 'Hello there!',
});
content = '<cute-icon [someInput]="context.testValue"></cute-icon>';

<ngx-dynamic-hooks [content]="content" [context]="context()"></ngx-dynamic-hooks>

When that signal's value changes, the input should update as well.

2. Should you clone the context object on changes?

Making it immutable like that would certainly improve change detection, but it should generally not be necessary - even if the dynamic component is OnPush. I say generally, because if you have zoneless Angular, things may get more tricky and you should probably be using signals anyway. If you do use zone.js still, the library should pick up on just about any change.

[AStrelkov]

Martin,

Thank you so much for your prompt and detailed answers. So far, everything seems to be clear to me, and as one AI robot says: "I went to think".

P.S.
I wanted to donate some money to your project, but unfortunately, my country is not listed as an available country on your Donate page.