Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

ng serve with traditional backend

Đang mở
#24,478 5 bình luận 5 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
angular, typescript
Lĩnh vực
cli

Hướng nghiên cứu

Bắt đầu bằng cách theo dõi cách ng serve xử lý /ng-cli-ws, các asset được tải lazy, các tệp hot-update và hành vi của options.ssl, sau đó xem xét luồng public-host hiện có. Công việc được xem là hoàn tất khi có một cách được hỗ trợ để phục vụ các asset phát triển của Angular và websocket thông qua một backend truyền thống mà không làm hỏng việc định tuyến của backend hoặc việc lựa chọn giao thức.

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

Mô tả

angular/build:dev-server area: @angular/build feature feature: insufficient votes
Which @angular/* package(s) are relevant/related to the feature request?

compiler-cli

Description

I would like to serve the index.html using a traditional backend, and use ng serve to get HMR for the angular app.

The issue with a proxy for the backend API calls is that development and production behave differently. Also, you cant have additional logic on the backend before serving the index.html (for example cookie auth)

Proposed solution

Have a flag on ng serve that the websocket should go directly to the angular server. and would be nice if we can have a single script instead of having to add it all manually.

In vite all you need to do is add the following to your server's HTML template.

<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>

https://vitejs.dev/guide/backend-integration.html

Alternatives considered

I tried adding the full path to the angular scripts, but the /ng-cli-ws calls goes to the backend server.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="https://localhost:4200/favicon.ico">
<link rel="stylesheet" href="https://localhost:4200/styles.css"></head>
<body>
  <app-root></app-root>
<script src="http://localhost:4200/runtime.js" type="module"></script><script src="https://localhost:4200/polyfills.js" type="module"></script><script src="https://localhost:4200/styles.js" defer></script><script src="https://localhost:4200/vendor.js" type="module"></script><script src="https://localhost:4200/main.js" type="module"></script></body>
</html>

--public-host=localhost:4200 fixes the /ng-cli-ws call, but lazy loading and the .hot-update.json still goes the backend server.
image

changing the base href to https://localhost:4200/ fixes above, but breaks the routing links

also, you need to enable ssl if your backend is ssl, as it will go to wss instead of ws, i think this should rather be based on options.ssl see https://github.com/angular/angular-cli/issues/24373#issue-1475322626.

Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
17 giờ 25 phút
Pull request đã merge (30 ngày)
183

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

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

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/angular-cli

Tất cả issue của angular/angular-cli

Issue tương tự

Thêm issue về TypeScript

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.