bug: ionic serve fails with "Cannot read properties of null" on second run after migrating to Angular application builder

[ryaa]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

After migrating an Ionic Angular starter app to the Angular application builder (use-application-builder migration), the first ionic serve works and the app loads. If you stop the dev server and run ionic serve again, the page renders blank and the console logs multiple runtime errors.

Representative console error (numbers may vary due to minification):

TypeError: Cannot read properties of null (reading 'parentNode')
    at updateChildren (index-*.js:2187:46)
    at renderVdom (index-*.js:2584:11)
    at callRender (index-*.js:2552:5)
    at ...
<ion-toolbar _ngcontent-ng-cb... class="hydrated"></ion-toolbar>
<ion-content _ngcontent-ng-cb... class="hydrated ..."></ion-content>

A screenshot of the error/blank screen is attached to this issue (white page + repeated Cannot read properties of null (reading 'parentNode') coming from Angular runtime while rendering Ionic components).

Please note that the production build works fine (ionic serve --configuration production)

Expected Behavior

ionic serve should consistently start and render the app with no runtime errors—both on the first run and on subsequent runs—after migrating to the Angular application builder.

Steps to Reproduce

1. Create a new Ionic Angular starter:

ionic start ionic-latest blank --type=angular --no-git --no-link --no-deps --package-id=ryltsov.alex.ionic.latest
cd ionic-latest
npm i

2. Run the Angular migration that switches to the new build system:

ng update @angular/cli --name use-application-builder

3. Start the dev server:

ionic serve

The app loads.

4. Stop the dev server (Ctrl+C), then start it again:

ionic serve

The browser shows a blank screen and the console fills with the errors shown above.

A minimal reproduction repository is also available here: https://github.com/ryaa/ionic-latest
This repository is a fresh starter app that has had its angular.json migrated to use the new application builder. Simply clone it, run npm install, and run ionic serve twice to see the error.

Code Reproduction URL

https://github.com/ryaa/ionic-latest

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/alexryltsov/.nvm/versions/node/v22.20.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.7.7
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : 20.3.6
@angular/cli : 20.3.6
@ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.3
@capacitor/android : not installed
@capacitor/core : 7.4.3
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.20.0 (/Users/alexryltsov/.nvm/versions/node/v22.20.0/bin/node)
npm : 11.6.2
OS : macOS Unknown

Additional Information

The root cause appears to be an initialization order conflict between the Vite dev server (used by the new application builder) and the legacy IonicModule.forRoot() method.

On the first ionic serve run, Vite builds everything from scratch, so IonicModule.forRoot() successfully defines all of Ionic's custom elements (like <ion-toolbar>, <ion-content>, etc.) before Angular attempts to render them.

On the second ionic serve run, Vite's caching and Hot Module Replacement (HMR) seem to reload modules in a different or non-deterministic order. This likely creates a race condition where Angular's rendering logic executes before IonicModule.forRoot() has finished defining the underlying custom elements. The components' internal logic then fails (e.g., trying to access element.parentNode when the element hasn't been properly attached to the DOM), leading to the TypeError and the app crash.