bug: regression, angular devkit 12.2.1 causes form control to be created after Web Component mounted

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which the bug was not present is @angular-devkit/build-angular@12.2.0.

Description

When using @angular-devkit/build-angular@12.2.1, form controls are created after a Web Component has been added to the DOM. This causes certain form components in Ionic Framework to not work properly.

🔬 Minimal Reproduction

1. Clone repo: https://github.com/liamdebeasi/ng-form-init. This contains an Angular 12.2 project running @angular-devkit/build-angular@12.2.0 which is the last good version where the bug is not present.
2. Run npm install and ng serve.
3. Open app in browser.
4. Click “Show Modal” button. Observe that the modal opens and there is a select dropdown with the label “Test Label” above a selected value of “b”.
5. Close the modal and repeat step 4 again. The observation should be the same.
6. Run npm install @angular-devkit/build-angular@12.2.1. This is the version that causes the bug to reproduce.
7. Repeat steps 2-4. Observe that the modal opens correctly.
8. Close and re-open the modal. Observe that this time, the label overlaps selected value “b”.

good ion-select	bad ion-select

🔥 Exception or Error

The problem here is that the ion-select component must have its value set on creation in order for the ion-label component to be positioned correctly. In Devkit 12.2.0 this works because the form control is created and the value is set before the ion-select component is added to the DOM (via connectedCallback). In Devkit 12.2.1 this does not work because the ion-select component is added to the DOM and then the form control is created.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.3
Node: 15.9.0 (Unsupported)
Package Manager: npm 7.5.3
OS: darwin x64

Angular: 12.2.3
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.0
@angular-devkit/build-angular   12.2.0
@angular-devkit/core            12.2.3
@angular-devkit/schematics      12.2.3
@schematics/angular             12.2.3
rxjs                            6.6.7
typescript                      4.2.4
    

Anything else relevant?

Additional context: https://github.com/ionic-team/ionic-framework/issues/23809

[alan-agius4]

The defect that was exploited, is that Zone.js is unable intercept native async/await.

More context about this defect is captured in https://github.com/angular/angular/issues/31730.

[angular-automatic-lock-bot[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.}