Node.js / Express.js + Angular router - сервер перезаписывает представление клиента объектом ответа при использовании прямой ссылки

Question

Я создаю приложение node.js с помощью Express, я размещаю Angular SPA в общей папке.

Приложение работает, и хостинг работает нормально, когда я использую угловой маршрутизатор для навигации по сайту, но когда я пытаюсь получить прямой доступ к ссылке, например: http://192.168.1.4:3000/posts, весь текст сайта просто объект ответа JSON, без приложения

это код Node.js, обрабатывающий запрос get

postRouter.route('/')
.options(cors.corsWithOptions, (req, res) => {
    res.sendStatus(200);

})
.get(cors.cors,  (req, res, next) => {
    posts.find({})
    .then((post) => {
        res.status(200);
        res.setHeader('Content-Type', 'application/json')
        res.send(post);
    }, (err) => next(err))
    .catch((err) => next(err));
})

это мой угловой сервис, отправляющий запрос на получение

getPosts(): Observable<Post[]> {
    return this.http.get(baseURL + 'posts')
    .catch(error => { return this.processHttpService.handleError(error); });
}

Почтовый компонент .ts файл

  ngOnInit() {
    this.postService.getPosts()
      .subscribe(posts => { this.posts = posts, console.log(this.posts); },
        errmess => this.errMess = <any>errmess);
  }

Опять же, когда я использую свое клиентское приложение Angular 5, размещенное в общедоступной папке, созданное с помощью ng build --prod, объект JSON извлекается из базы данных mongodb и правильно отображается на моем веб-сайте вместе с остальной частью приложения, верхний колонтитул, тело и нижний колонтитул.

также стоит отметить, что console.log в ngOnInit () не отображается в браузере при использовании прямой ссылки.

Любой совет / исправление приветствуется

Answer 1

У вас есть столкновение маршрутов между Angular и вашим экспресс-приложением. Angular обслуживается по одному маршруту (я предполагаю маршрут /), а затем он как бы «угоняет» навигацию пользователей. Он делает это, фактически не меняя веб-страницы, вместо этого он просто меняет URL-адрес в панели навигации, но никогда не отправляет веб-запрос на доступ к этому ресурсу.

Затем у вас есть конечные точки на веб-сервере, которые прослушивают эти конечные точки. Это означает, что в тот момент, когда вы посещаете страницу /posts, вы не просите углового ничего сделать. На самом деле, angular даже не загружается, потому что он загружается только по маршруту /. Вместо этого вы переходите прямо к своему API.

Есть способы обойти это, чтобы начать с того, что многие люди размещают свои API довольно отдельно, либо на поддомене, либо на /api (например, /api/posts). Тогда ваше угловое приложение может быть подано по маршруту /. Есть и другие методы, которые вы можете использовать, чтобы затем позволить пользователю перейти на /posts и по-прежнему загружать ваше угловое приложение.

Вы можете использовать несколько подходов для этого, например, стратегия определения местоположения хеша , или вы можете подать ваше угловое приложение с любого маршрута в приложении (* в экспрессе) и загрузить угловое приложение который затем вступит во владение. Этот второй подход является наиболее комментирующим, обычно он приводит к размещению вашего API в поддомене, а затем обслуживает ваше угловое приложение по маршруту * обычного доменного имени. Например: api.myapp.com будет обслуживать только ответы JSON, но любой маршрут на myapp.com будет обслуживать угловое приложение, например myapp.com/posts.