Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

ng serve with traditional backend

Abierto
#24,478 5 comentarios 5 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
cli

Línea de trabajo

Comienza rastreando el manejo de ng serve para /ng-cli-ws, los assets cargados de forma diferida, los archivos de hot-update y el comportamiento de options.ssl; después, revisa el flujo existente de public-host. Se considera terminado cuando exista una forma compatible de servir los assets de desarrollo de Angular y websocket a través de un backend tradicional sin romper el enrutamiento del backend ni la selección del protocolo.

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

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
16 h 35 min
PR fusionados (30 d)
176

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/angular-cli

Todos los issues de angular/angular-cli

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.