Build optimizer breaks custom web element library

[tgoze]

🐞 bug report

Affected Package

This issue is caused by @angular/compiler

Is this a regression?

This did not work as far back as v. 9.

Description

When installing a custom web element library (specifically @microsoft/fast-components) through node with the custom elements schema enabled, the custom web elements render fine in development mode. However, when building the application in the default "production" configuration with buildOptimizer set to true, the custom elements will cause a "call stack size exceeded" error. This error does not happen normally on these elements.

🔬 Minimal Reproduction

Pull the repro from here. This is a base Angular 11 project with @microsoft/fast-components installed. The components are included as instructed on this site.

Normal behavior:

1. Pull the repo
2. Run npm i
3. Run npm start
4. Open localhost:4200
5. See a simple textbox and radio button rendered and no console errors

Reproduce error:

1. Run npm start-prod
2. Open localhost:5005
3. Observe the console error and the radio button un-rendered

If buildOptimizer in angular.json for the production mode is set to false the error will not occur for npm start-prod.

🔥 Exception or Error

polyfills-es2015.1f913f16a2d346cc8bdc.js:1 Uncaught RangeError: Maximum call stack size exceeded
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
main-es2015.1dde2514dd0a5acad672.js:1 ERROR RangeError: Maximum call stack size exceeded
    at getNotifier (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
    at mi.watch (main-es2015.1dde2514dd0a5acad672.js:1)
    at ai.getValue (main-es2015.1dde2514dd0a5acad672.js:1)
    at HTMLElement.get [as checked] (main-es2015.1dde2514dd0a5acad672.js:1)
un @ main-es2015.1dde2514dd0a5acad672.js:1

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.5
Node: 12.14.0
OS: win32 x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            11.0.5
@angular-devkit/schematics      11.0.5
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.5.5
typescript                      4.0.5

[alan-agius4]

Hi,

I had a look at this issue and it appears to caused when turning terser'spure_getters flag on

angular-cli/packages/angular_devkit/build_angular/src/webpack/configs/common.ts

Line 438 in 1f16d11

pure_getters: buildOptions.buildOptimizer,

Let's continue tracking this here: #15761

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}