Nested Dialog Error After Build

[dagistan-tuncbilek]

I'm submitting a bug report or a missing documentation issue

Bug report Documentation issue or request

Current behavior

After migrating to Angular standalone application, nested dialogs are not working after build. In development process, there is no issue. First dialog opens without any issue, but when i open another dialog occurs an error "this.dialog.open(...) is undefined". Probably Dialog service is not found in first dialog. My guess, it causes because of nested standalone component import. As i said before, in development it works as expected. Maybe i missed something about building. But i am using this library in production for 2 years and first time i see such an issue.

Angular version: 16 / 17

Browser:

• [x] Chrome (desktop) version latest
• [ ] Chrome (Android) version XX
• [ ] Chrome (iOS) version XX
• [x] Firefox version latest
• [ ] Safari (desktop) version XX
• [ ] Safari (iOS) version XX
• [ ] IE version XX
• [ ] Edge version XX

For Tooling issues:

• Node version: 18
• Platform: Linux server

[NetanelBasal]

Can you reproduce it?

[dagistan-tuncbilek]

Yes i will try on Monday in a basic application.

[dagistan-tuncbilek]

I have created a quick sample app, which has same error. Working on dev but not working after build. Please take a look.

https://test.pos.seacotec.com

https://github.com/dagistan-tuncbilek/ng-neat-test

[dagistan-tuncbilek]

Probably the problem is regarding ID. I am using the module in the service and i think same id name caused this error. I will test my application with custom ID, then let you know.

[NetanelBasal]

Actually @shaharkazaz did a changed recently in this area which might caused the issue. @shaharkazaz what do u think?

[dagistan-tuncbilek]

Yes confirmed, it is an ID issue. With NgModule, ID didn't cause any problem when i use dialogService in another service. But with standalone app structure ID causes error if i don't provide an ID. When i add a random ID, the problem solved.

This is my code and reusable function in Utility service.

  public dialogCommon(component: any, config: Partial<DialogConfig<any>> | undefined = undefined) {
    return <Observable<any>>this.dialog.open(component, {
      ...config,
      id: Math.random().toString(),
      minHeight: config?.minHeight ? config.minHeight : 200
    }).afterClosed$;
  }

Maybe you can add a random ID if id not provided, instead of component name as id, then this problem never happens.

[shaharkazaz]

Ya that's the change for sure. I'll review the changes again to find the best solution

[shaharkazaz]

@dagistan-tuncbilek This should have been a braking change but it was missed somehow. The current behavior is what we intend to use. You can fix this on your end with the solution you provided, but I think the following is a preferred solution:

function withRandomId() {
  return  Math.random().toString();
}

// Pass the random id to the current dialog calls
this.dialog.open(MyComp, {
  // Some config options
  ...withRandomId()
});