IdsMessage: ids-modal-button not working when build in production

[kellyFeng1]

Describe the bug
the ids-modal-button

To Reproduce

html:

<ids-message id="my-message">
    <ids-text slot="title" font-size="24" type="h2">My Message Title</ids-text>
    <p>This is my message</p>
    <ids-modal-button slot="buttons" appearance="secondary">OK</ids-modal-button>
    <ids-modal-button slot="buttons" appearance="primary" cancel>Cancel</ids-modal-button>
  </ids-message>
  
  <ids-button id="trigger-button" appearance="secondary" (click)="handleMessageClick()">
    <span>Show Message</span>
  </ids-button>

ts:

handleMessageClick() {
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
    const messageEl = document.querySelector('#my-message') as any;
    messageEl?.show();
  }

When building in dev mode, clicking 'çancel' button will close the message. But if using ng serve --configuration production for building, the cancel button doesn't work.

Version
"ids-enterprise-wc": "^1.0.0-beta.16"

Platform

• Infor Application: WFM

[kellyFeng1]

I tried to remove the buildOptimizer in Angular build config, and it works.

[tmcconechy]

@kellyFeng1 so this can be closed/nothing to investigate?

[kellyFeng1]

@tmcconechy the buildOptimizer=true is a default setting in Angular building and can shrink Angular bundles. We can remove this optimizer temporarily to make it work, but I believe it is still a bug.

[EdwardCoyle]

I can confirm that we can reproduce this in our Angular WC examples project if you run ng serve --configuration production. When you do that and open http://localhost:4200/ids-message/example, and try to debug on this line, you can observe the code never runs. If you debug this area with dev tools, you can also see this code gets modified very heavily by the build optimizer.

There are some additional problems as well. For example, neither Modal Button works in that example, and if you click out of the message to close, and re-open the message, the overlay is missing. Building for development instead results in this code running as expected and none of these issues occur.

I've been digging into this and I've come across quite a bit of correspondence in the Angular Github repos related to buildOptimizer being enabled, and third party libraries. Some reading material here if you like:

• main discussion thread that explains the problem pretty well
• This comment describes the problem flag in question
• Terser/Uglify.js reference for the pure_getters config option

Some other related threads:

• Production build using buildOptimizer is broke but works without buildOptimizer (Angular v6/v7) angular/angular-cli#17255
• Introduce different levels for the optimization build option angular/angular-cli#15761
• Build optimizer breaks custom web element library angular/angular-cli#19705 (another Web Component library suffering the same problem)

The gist of it is, the buildOptimizer feature introduces an Uglify.js/Terser flag that causes modifications to bundled third party code that cannot be opted-out (see anything referring to the pure_getters setting). Per angular/angular-cli#15761, seems like they are finally moving on a way to bypass just those settings while keeping the optimizer enabled, but currently there are no ways around it.

I'm still trying to learn what we could do on the WC/Angular side to fix this aside from turning off buildOptimizer but the options aren't great:

• Modify the WC library to avoid getters with "side effects" (still trying to understand what that means in terms of impact)
• Some comments in those threads suggest using a third-party Angular build system, or rolling your own, to get around the need to use Terser.

[tmcconechy]

@EdwardCoyle i saw NG 17 which we are on now in that example project uses a new build system in esbuild (which we use on our repo too). Maybe you can see if the new build method works https://angular.io/guide/esbuild

[EdwardCoyle]

Update on this: I've been stuck on an issue that I think may be a bug with the new ESBuild system. Currently waiting for feedback on angular/angular-cli#26665 for more information

[EdwardCoyle]

@kellyFeng1 We've done some testing on a production configuration of our Angular examples repo against Angular 17 and the new application builder, which no longer uses buildOptimizer underneath, utilizing Vite/ESBuild instead. See this PR for details.

Considering this is Angular's recommendation for new applications going forward, it may be better than reworking all our components against the buildOptimizer setting. However the current Webpack-based build system is still full-supported for the time being. Is upgrading to Angular 17 an option for your team?

[tmcconechy]

@kellyFeng1 given that the new build method in angular solves it, this may be the best we can do for you. I also recommend the new control flow syntax in angular 17 https://www.angularaddicts.com/p/angular-17-new-control-flow-with-signals

Will mark this resolved for now with that solution