ionic-team / ionic-team/ionic-framework

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

Abierto
#30,753 2 comentarios 2 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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 ...

```

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).

Image

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 ``, ``, 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.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start with the linked minimal reproduction repository and run the documented setup, then execute ionic serve twice after the use-application-builder migration. Compare the first and second runs around IonicModule.forRoot(), the Vite dev server, and the reported Angular rendering errors; done means repeated ionic serve runs render the app without the null parentNode errors.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript, vite
Área
build-system, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
48/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.