Угловой маршрут отображает необработанный JSON при обновлении браузера - PullRequest
Новая
       44

Угловой маршрут отображает необработанный JSON при обновлении браузера

0 голосов
/ 02 декабря 2018

Я создаю стековое приложение MEAN.Я настроил прокси-конфиг для разработки.Я успешно вызываю API из Angular / Node, но когда я обновляю браузер, маршрут Angular отображает мои необработанные данные JSON следующим образом:

enter image description here

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

Некоторые вещи, которые яВы пробовали:

  • Изменить URL-адрес углового маршрута, чтобы он совпадал с 'homeaway' или 'search'
  • Измените URL-адрес proxy.config на «/ homeaway».Хотя я хочу, чтобы путь использовался для любого внутреннего URL-запроса, который мне нужно сделать.

Все это приводит к 404 ошибкам.

Так что просто уточнить: я получаю APIданные успешно и мой URL работает изначально.Обновление страницы отображает необработанный JSON вместо моего Angular / HTML.

Я довольно новичок в MEAN-маршрутизации стека, поэтому я хотел бы получить некоторую помощь, чтобы выяснить это и узнать почему что-то вродеэто будет происходить.Спасибо, что посмотрели.

РЕДАКТИРОВАТЬ: Я думаю, это может быть вызвано, потому что мои маршруты Angular и Node ('/ homeaway / search') совпадают друг с другом, но я не уверен, почему это может вызвать проблемы,Когда я пытался изменить узел или угловой маршрут, чтобы они не совпадали, я получаю 404.

1 Ответ

0 голосов
/ 02 декабря 2018

Если вы выполнили сборку для своего углового приложения, вам может потребоваться изменить маршрутизацию в одном из ваших приложений.Здесь может происходить то, что когда вы меняете маршруты в пользовательском интерфейсе, angular заботится об этом.Он попадает в API и получает ответ json, ожидаемый вашим приложением.Но когда вы запускаете обновление в своем браузере, ваш сервер узлов получает полный URL localhost:3000/search и возвращает ответ json вместо возврата файла HTML или js, и тот же самый json отображается в браузере.

...