Angular Route在浏览器刷新上显示原始JSON

Question

我正在构建MEAN Stack应用。我已经为开发设置了代理配置。我已经成功从Angular / Node调用了API，但是当我刷新浏览器时，Angular路由显示了我的原始JSON数据，如下所示：

关于此特定问题，StackOverflow上没有太多细节。我99％确信这是我设置Angular和Node路由的方式的问题，但我不确定自己做错了什么。

proxy.config.json

{
  "/**": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
    }
}

我的角路线

const APP_ROUTES: Routes = [
    { path: '', component: MainComponent },
    { path: 'homeaway/search', component: ResultsComponent }
];

角度服务方法

  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) <-- MY GET CALL
    .pipe(
      map((res: Response) => res),
      catchError(error => throwError(error.message || error))
      )

  }

节点服务器信息

var homeAwayRouter = require('./routes/homeaway');
app.use('/homeaway', homeAwayRouter)

我的节点路线

router.get('/search', (req,res,next)  => {

    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);
      })

  });

结果组件

调用服务方法的地方

ngOnInit() {

    //Query params-based search on page init
    this.activatedRoute.queryParams.subscribe(params => {
         this.homeAwayService.searchListings(params).subscribe((res) => {
             this.searchResults = res
             console.log("response in activatedRoute in results", this.searchResults)
         });
  })

}

package.json

"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"
  },

我尝试过的一些事情：

• 更改Angular路线URL以使其仅与“ homeaway”或“ search”匹配
• 更改proxy.config网址以匹配“ / homeaway”。虽然我想要 适用于我需要进行的任何后端URL请求的路径。

所有这些都会导致404错误。

因此，请澄清一下：我成功获取了API数据，并且URL最初可以正常工作。页面刷新显示原始JSON而不是我的Angular / HTML。

我对MEAN堆栈路由还很陌生，所以我希望获得一些帮助来弄清这一点并学习为什么这样的事情。感谢您的关注。

编辑：我想这可能是由于我的Angular和Node路由（“ / homeaway / search”）彼此匹配而引起的，但是我不确定为什么会引起问题。当我尝试更改节点或角度路线以使其不匹配时，我得到了404。

Answer 1

如果您已经完成了针对角度应用的构建，则可能需要在其中一个应用中更改路由。这里可能发生的事情是，当您在UI中更改路线时，angular会处理它。它符合API，并为您的应用程序期望json响应。但是，当您在浏览器上进行刷新时，节点服务器将获得完整的URL localhost:3000/search并返回json响应，而不是返回HTML或js文件，并且浏览器中将显示相同的json