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

Đang mở
#30,753 2 bình luận 2 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript, vite
Lĩnh vực
build-system, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.