angular-cli
angular-cli copied to clipboard
angular
ng serve with traditional backend
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.
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.
To support this setup, you will most likely need to set the HTML base href to the dev server and then within the Angular application use the APP_BASE_HREF provider token with a value of / based on the HTML file above. The router uses this token to control the base path applied to all routing links. By default it uses the HTML base href value but with this server setup that value is not appropriate for the router and must be manually provided.
Also, if the HTML base href is set to the dev server, then the script tags should no longer need to contain the absolute path since the browser will use the HTML base href for relative requests.
@clydin thanks that works, but setting the HTML base href breaks all the fetch calls. again, in Vite it works out of the box easily, I hope we can have it in Angular too.
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular's feature request process in our documentation.
![angular-robot[bot] avatar](https://avatars.githubusercontent.com/in/43341?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.
