angular / angular/angular-cli

vite dev-server doesn't allow lazy loaded modules debugging

Đang mở
#28,341 4 bình luận 1 reaction 0 người được giao Xem trên GitHub
angular/build:dev-server area: @angular/build needs: investigation
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### Command

serve

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

16 (with webpack)

### Description

If you try to debug a lazy loaded component form vscode, and set a breakpoint, say into ngOnInit of the component, vite never stops when reaches the breakpoint.
![immagine](https://github.com/user-attachments/assets/18f5f134-c7f9-4ab0-9262-12c06805e2b2)

It's difficult to give more data, as
- there is no way to change vite config (to add verbosity, for example)
- looking in the output window, there is nothing tha allows to see vite output

### Minimal Reproduction

create a new 18.2 application, add a lazy loaded route, start debugging from visual studio code, set a breakpoint on a line inside the lazy loaded component.
the component renders correctly but vite never stops for the breakpoint.
Here a repository that reproduces the bug. I tested it only in Vscode.
[https://github.com/alfmosmq/lazy-loading-debug-test](https://github.com/alfmosmq/lazy-loading-debug-test)

### Exception or Error

_No response_

### Your Environment

```text
Angular CLI: 18.2.2
Node: 20.17.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 18.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1802.2
@angular-devkit/build-angular 18.2.2
@angular-devkit/core 18.2.2
@angular-devkit/schematics 18.2.2
@schematics/angular 18.2.2
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10
```

### Anything else relevant?

this image shows that the app is actually split in main and a lazy loaded module
![immagine](https://github.com/user-attachments/assets/fbaec1ce-0d88-4295-810b-546aa4c66d57)
launch.json:
```
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}
```
tasks.json:
```
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
```

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

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

Hướng nghiên cứu

Bắt đầu với bản tái hiện lazy-loading được liên kết và đường dẫn `serve` của Angular CLI sử dụng Vite. Chạy cấu hình `launch.json` của VS Code, đặt breakpoint trong component lazy-loaded và so sánh với một breakpoint trong bundle chính. Hoàn tất khi quá trình debug dừng tại breakpoint của component lazy-loaded hoặc giới hạn này được ghi lại cùng với output liên quan.

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, vscode
Lĩnh vực
build-system, developer-experience, devtools
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.