NG0912: Component ID generation collision detected. Components GridstackItemComponent / GridstackComponent' about gridstack.js HOT 5 CLOSED

no idea. you need to post the simplest possible case showing the issue if the bug is in the lib.

from gridstack.js.

@adumesny simplest possible case can be found here:
https://github.com/ringo-anva/gridstack

I created one host and two remotes.

When you switch between remote 1 and remote 2 you will get the 'warning' (which causes some issue for us):

NG0912: Component ID generation collision detected. Components 'GridstackItemComponent' and 'GridstackItemComponent' with selector 'gridstack-item' 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://angular.io/errors/NG0912

Cheers,
Ringo.

from gridstack.js.

@adumesny

Steps to Reproduce:
checkout main at repo https://github.com/ringo-anva/gridstack
npm install
npm run start
open devtools console
click on menu option 'remote 1'
click on menu optioni 'remote 2'

from gridstack.js.

Hi @ringo-anva. I saw that you marked as solved your problem in this issue >>> #20430.

I checked your repo but you haven't posted yet the changes you made to make it work. Could you share your solution to see what approach did you follow? I need to see what should I change in my project configuration in order to get rid of this problem.

Thanks in advance.

from gridstack.js.

@csgentile

At file module-federation.config.ts in each remote and host it should look like:

const config: ModuleFederationConfig = {
  name: 'apps/gridstackmf/remote1',
  exposes: {
    './Routes': 'apps/gridstackmf/remote1/src/app/remote-entry/entry.routes.ts',
  },
  additionalShared: [
    {
      libraryName: 'gridstack/dist/angular',
      sharedConfig: { singleton: true },
    },
  ],
};

export default config;

So addding the additionalShared solve it, good luck.

from gridstack.js.