title: Angular Route Displays Raw JSON on Browser Refresh
body: <p>I am building a MEAN stack app.  I've set up a proxy config for development.  I am successfully calling an API from Angular/Node, but when I refresh the browser, the Angular route displays my raw JSON data like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LXZy4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LXZy4.png" alt="enter image description here"></a></p>
  
  <p>There aren't much specifics on StackOverflow about this particular problem.  I'm 99% certain it's a problem with how I've set up my Angular and Node routing, but I'm not sure what I could be doing wrong.</p>
  
  <h1> proxy.config.json </h1>
  
  <pre><code>{
    "/**": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
      }
  }
  </code></pre>
  
  <h1> My Angular route </h1>
  
  <pre><code>const APP_ROUTES: Routes = [
      { path: '', component: MainComponent },
      { path: 'homeaway/search', component: ResultsComponent }
  ];
  </code></pre>
  
  <h1> Angular service method </h1> 
  
  <pre><code>  searchListings(trip) {
      console.log("search listing", trip)
  
      //Grab all of the params from the trip argument and append them to params variable
      let params = new HttpParams()
      Object.keys(trip).forEach(function (key) {
       params = params.append(key, trip[key]);
      });
  
      const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
  
      const options = {
        headers: headers,
        params: params
      }
  
      return this.http.get(`/homeaway/search`, options) &lt;-- MY GET CALL
      .pipe(
        map((res: Response) =&gt; res),
        catchError(error =&gt; throwError(error.message || error))
        )
  
    }
  </code></pre>
  
  <h1> Node server info </h1>
  
  <pre><code>var homeAwayRouter = require('./routes/homeaway');
  app.use('/homeaway', homeAwayRouter)
  </code></pre>
  
  <h1> My Node route </h1>
  
  <pre><code>router.get('/search', (req,res,next)  =&gt; {
  
      let params = {
        availabilityStart: req.query.availabilityStart,
        availabilityEnd: req.query.availabilityEnd,
        minSleeps: req.query.minSleeps,
        centerPointLatitude: req.query.centerPointLatitude,
        centerPointLongitude: req.query.centerPointLongitude,
        distanceInKm: req.query.distanceInKm
      }
  
      axios.get(searchURL, options, params)
        .then(function (response) {
          console.log('Successful HomeAway search in server /search', response);
          res.send(response.data); //Send data
        })
        .catch(function (error) {
          console.log(error);
        })
  
    });
  </code></pre>
  
  <h1> Results component </h1>
  
  <p><b> Where the service method is called </b></p>
  
  <pre><code>ngOnInit() {
  
      //Query params-based search on page init
      this.activatedRoute.queryParams.subscribe(params =&gt; {
           this.homeAwayService.searchListings(params).subscribe((res) =&gt; {
               this.searchResults = res
               console.log("response in activatedRoute in results", this.searchResults)
           });
    })
  
  }
  </code></pre>
  
  <h1> package.json </h1>
  
  <pre><code>"scripts": {
      "ng": "ng",
      "start": "concurrently \"npm run serve-api\" \"npm run serve\"",
      "serve": "ng serve --proxy-config proxy.config.json",
      "serve-api": "nodemon server/app.js --watch server",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
  </code></pre>
  
  <p><i>Some things I've tried:</i></p>
  
  <ul>
  <li>Change Angular route URL to just match 'homeaway' or 'search'</li>
  <li>Change the proxy.config url to match '/homeaway'.  Although I want
  the path to be usable for any backend url request I need to make.</li>
  </ul>
  
  <p>All of these result in 404 errors.</p>
  
  <p>So just to clarify:  I get the API data successfully and my URL works initially.  A page refresh displays the raw JSON instead of my Angular/HTML.</p>
  
  <p>I'm fairly new to MEAN stack routing, so I would love some help figuring this out and learning <em>why</em> something like this would be happening.  Thanks for taking a look.</p>
  
  <p>EDIT:  I imagine this might be caused because my Angular and Node routes ('/homeaway/search') match each other, but I'm not sure why that would cause a problem.  When I've attempted to change the node or Angular route so that they don't match, I get a 404.</p>