I recently converted a regular Angular app to an Angular Universal app so that I can get better SEO when I deploy the app. I need this as I want google to pickup on all of my dynamically rendered pages such as page/:id. Here is my server.ts file:
const pathFilter = function (path: any, req: any) {
return path.match('^/api');
};
server.use('/api',
createProxyMiddleware({
target: 'http://localhost:8081/api',
pathFilter: pathFilter,
changeOrigin: true,
logLevel: 'debug',
logger: console,
onProxyReq: function(proxyReq: any, req: any, res: any) {
// log the req
console.log('RAW REQUEST from the target', JSON.stringify(req.headers));
},
onProxyRes: function (proxyRes: any, req: any, res: any) {
// log the response
console.log('RAW Response from the target', JSON.stringify(proxyRes.headers));
}
}));
I have a local Golang server with Gin Routing running on http://localhost:8081, but I cannot seem to proxy my requests of type http://localhost:4000/api to this local Golang server, where all of my API endpoints are.
I get errors of this type:
ERROR RuntimeError: NG04002: 'api/pages/products'
at Recognizer.noMatchError (/Users/kacylombard/Desktop/smartassreviews/client/smartassreviews/dist/smartassreviews/server/main.js:1:2773346)
So essentially, my basic API callouts in my Angular components are not working. For example, this callout contained in the ngOnInit function does not work (it returns the above error):
async ngOnInit() {
this.spinner.show();
try {
const data = await this.exploreService.getAllReviewPages(this.pageNum)
This specific API callout returns an entire HTML file that represents the current page.