Angular Integration
Add your AEO blog to an Angular application.
Like React, Angular compiles to static files, so proxying must happen at the server or hosting level. Angular CLI provides a dev proxy for local testing, and you configure your production server separately.
Development: Create proxy.conf.json
Create a file called proxy.conf.json in your project root:
{
"/blog": {
"target": "https://aeo.how",
"secure": true,
"changeOrigin": true
}
}Then run your dev server with the proxy flag:
ng serve --proxy-config proxy.conf.json
Visit localhost:4200/blog to test.
Add the proxy-config flag to your package.json start script so you don't have to type it every time.
Production: Choose your hosting method
Angular builds to static files in the dist/ folder. Your production web server needs to handle the proxying:
- Vercel: add a rewrite in vercel.json (see Cloud Hosting guide).
- Netlify: add a redirect in netlify.toml (see Cloud Hosting guide).
- Firebase Hosting: add a rewrite in firebase.json: { "source": "/blog/", "destination": "https://aeo.how/blog/" }.
- Nginx / Apache: see the Apache/Nginx guide.
Angular Universal (SSR)
If you're using Angular Universal (server-side rendering), you can add proxy middleware in your server.ts file using http-proxy-middleware:
import { createProxyMiddleware } from "http-proxy-middleware";app.use("/blog", createProxyMiddleware({ target: "https://aeo.how", changeOrigin: false, }));
Keep changeOrigin set to false so your original Host header is forwarded to AEO. This is how AEO identifies your brand.
For static Angular apps (no SSR), you must configure proxying at the server or hosting level.
Angular Universal (SSR) can use http-proxy-middleware for a native Node.js proxy solution.
Firebase Hosting supports rewrites natively, ideal if you're already using Firebase.