Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

ng serve with traditional backend

Ouverte
#24,478 5 commentaires 5 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
angular, typescript
Domaine
cli

Piste de recherche

Commencez par suivre le traitement de ng serve pour /ng-cli-ws, les assets chargés à la demande, les fichiers hot-update et le comportement de options.ssl, puis examinez le flux public-host existant. Le travail est terminé lorsqu’il existe un moyen pris en charge de servir les assets de développement d’Angular et websocket via un backend traditionnel, sans casser le routage du backend ni la sélection du protocole.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
16 h 35 min
PR mergées (30 j)
176

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.