Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

ng serve with traditional backend

Aberta
#24,478 5 comentários 5 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
angular, typescript
Domínio
cli

Direção de pesquisa

Comece rastreando o tratamento de ng serve para /ng-cli-ws, os assets carregados sob demanda, os arquivos de hot-update e o comportamento de options.ssl; depois, revise o fluxo existente de public-host. Está concluído quando houver uma forma compatível de servir os assets de desenvolvimento do Angular e websocket por meio de um backend tradicional sem quebrar o roteamento do backend nem a seleção de protocolo.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
17h 25min
PRs com merge (30d)
183

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/angular-cli

Todas as issues de angular/angular-cli

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.