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" : ""}
}
}
2
Answers
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, addObviously, you will not want to do this when building for production.
The accepted answer is deprecated, since angular 12 we can use –proxy-config flag just as usual 😀