proxy in angular universal

Question

I'm on the projects that were made with Angular Universal.

I need to change blog.mywebsite.com to mywebsite.com/blog for SEO, I used proxy-config in ng start, like code below, it works correctly but it doesn't work when I run build:ssr

there is no error in the built project, just after running with node dist / server.js show website but I call mywebsite.com / mag I redirect to 404 page, while there is no problem in npm start

  "scripts": {
   "ng": "ng",
   "build": "ng build --prod",
   "start": "ng serve -o  --proxy-config src/proxy.conf.json ",
   "extract": "ng xi18n --output-path=locale",
   "build:ssr": "npm run build:client-and-server-bundles  && npm run 
    webpack:server ",
   "serve:ssr": "node dist/server.js",
   "build:client-and-server-bundles": "ng build --prod && ng run 
     angular.io-example:server",
  "webpack:server": "webpack --config webpack.server.config.js --devServer -- 
   progress --colors"
  },

and this is my config-proxy-file:

  {
    "/mag": {
      "target": {
      "host": "mag.mywebsite.com",
      "protocol": "http:",
      "port": 80
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info",
     "pathRewrite": {"^/mag" : ""}
  }
}

What do you mean by "it doesn't work"? Is there any error message given? What happens instead? — Nico Haase, Jul 01 '18 at 07:51
No, there is no error in the build project, just after running with node `dist / server.js` show website but I call `mywebsite.com / mag` i redirect to 404 page, whiles there is not problem in `npm start` — Alireza Varmaghani, Jul 01 '18 at 08:25
The `proxy` configuration is intended to proxy calls when running the dev server via `ng serve`. After you run `ng build` you are responsible for the web server and its configurations — Vikas, Jul 01 '18 at 09:03

score 7 · Answer 1 · answered Jun 15 '21 at 15:08

7

The accepted answer is deprecated, since angular 12 we can use --proxy-config flag just as usual :D

answered Jun 15 '21 at 15:08

Remy

1,053
1
19
25

It looks, it is working but it can be created only one proxy route for now :) – user3714967 Sep 18 '21 at 08:14
1

Worked for me with multiple proxy routes. You can also put the path in your `angular.json`, e.g. at `"serve-ssr": { "configurations": { "development": { "proxyConfig": "path" }}}` – vlz May 25 '22 at 11:48

score 4 · Accepted Answer · answered Jun 11 '19 at 14:43

4

You can configure a proxy in the express server of the app. Serving Angular Universal will not use the proxy config that ng serve uses, so it will try to call the relative domain (i.e. localhost and port when running locally). The answer given here explains how to add an express proxy. To summarize:

In your src/server.ts file, add

import * as proxy from 'http-proxy-middleware'

const apiProxy = proxy('/api', { target: 'http://localhost:8080' });
app.use('/api', apiProxy);

Obviously, you will not want to do this when building for production.

answered Jun 11 '19 at 14:43

nikojpapa

660
1
8
16

2

Hi, I want to use http-proxy-middleware for proxy on my Angular Universal project. This code snippet works local machine but it does not make proxy from https://frontend to https://backend. For example; https://www.example.com/api ==> https://www.example.com:3000 – caglarturkurka Nov 06 '19 at 09:03
sorry for my delayed answer, but could you tell me clearly if you haven't found your solution yet? based on what I understood from your question I assumed you need http-angular-proxy which you can find information about it in the angular online document=> https://angular.io/guide/build, let me know if you need more help :) – Alireza Varmaghani Dec 13 '20 at 05:24
Look here for how to use the new version of `http-proxy-middleware` https://stackoverflow.com/a/60755865 – propatience Dec 12 '22 at 10:56

proxy in angular universal

2 Answers2