fix: Error with angular and specific fast web components in multiple components like checkbox

[LaraAu]

🐛 Bug Report

Using angular/cli with FAST webcomponents. I used the page https://www.fast.design/docs/integrations/angular for reference. Everything worked properly using "ng serve" but using it in production mode ("ng serve --configuration production") made an error occur for many components like FASTCheckbox.

💻 Repro or Code Sample

The issue did not occur in Stackblitz but occured with this code when I downloaded it and ran it locally with ng serve --configuration production
https://stackblitz.com/edit/angular-fast-checkbox?file=src/app/app.component.ts

🤔 Expected Behavior

The checkbox should be visible and no error should occur when running it outside of Stackblitz.

😯 Current Behavior

The checkbox is not shown but an error occurs:

Uncaught InternalError: too much recursion
getValue main.js:27461
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
main.js:formatted:27461
getValue main.js:27461
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278

ERROR InternalError: too much recursion
watch main.js:27386
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292
watch main.js:27395
track main.js:27278
getValue main.js:27462
get main.js:27292

💁 Possible Solution

Not entirely sure what happens but preventing the scripts from optimizing prevents the problem. (Maybe treeshaking/dead code removal?)

🔦 Context

I tried to use Fluent Components in a Angular Webapp but the issue occured when I tried to deploy it. I realized that it wasn't soley a Fluent problem but had the issue with Fast web components as well. For Fluent I tried including the CDN instead and when then running it in production there weren't any errors and everything worked properly but this is not a real solution for us.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser Microsoft Edge (Version 90.0.818.66), Google Chrome, Mozilla FireFox (Version 88.0.1)
• Versions see above

[EisenbergEffect]

Can you provide Angular version info? This seems like a duplicate of another issue we saw reported where the Angular compiler was using internal settings that broke getters. If that's the case, then Angular needs to provide some way to adjust that setting.

[rajsite]

I think we hit the same issue. It looks like one of the optimization passes used for production builds in Angular (terser configured with pure_getters) results in this behavior. The behavior is not seen in dev builds which skip the optimization pass.

There is an open feature request to make the optimization passes more configurable but there has not been much activity for a few years: angular/angular-cli#15761

The workaround of disabling buildOptimizer completely allowed fast-elements to run. Completely disabling buildOptimizer resulted in a pretty big bundle size increase in my sample app. Currently weighing against the option of hackier solutions like a script to modify the pure_getters setting of files in node_modules during build which in local testing prevented the error and did not have a significant change in bundle size for a sample app.

[EisenbergEffect]

Thanks for the update. Please let me know how that works out. We can add this to our docs based on what you learn as well, to help other community members.

[rajsite]

Updating to fast-element 1.4.1 as a result of the changes from #4969 solved the issue for me. I was able to re-enable buildOptimizer:true in angular.json.

Unfortunate that Fast needed a change to accommodate Angular's Terser configuration. Hopefully more pressure can be put on addressing angular/angular-cli#15761 😉

[nicholasrice]

Thanks @rajsite. This does look like the same issue described #4969 and fixed in fast-element@1.4.1 by #4999. I'm going to close this out as fixed, but please re-open if the problem persists.