Angular app converted to angular universal will not proxy requests to existing API

54 Views Asked by At

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.

0

There are 0 best solutions below