Node.js / Express.js + Angular 路由器 - 使用直接 link 时服务器用响应对象覆盖客户端视图

Question

我正在使用 express 构建一个 node.js 应用程序，我在 public 文件夹中托管一个 Angular SPA。

当我使用 angular 路由器在网站周围导航时，应用程序运行并且托管工作正常，但是当我直接尝试访问 link 时，例如：http://192.168.1.4:3000/posts, 整个网站只是 JSON 响应对象，没有应用

这是处理获取请求的Node.js代码

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

这是我的 angular 服务发送获取请求

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

Post 组件 .ts 文件

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

同样，当我使用 Angular 5 客户端应用程序托管在 public 文件夹中时，使用 ng build --prod 构建，JSON 对象从 mongodb 数据库并正确显示在我的网站上，以及应用程序的其余部分、页眉、正文和页脚。

可能还值得注意的是，当使用直接 link.

时，ngOnInit() 上的 console.log 不会显示在浏览器上

非常感谢advice/fix

Answer 1

您在 angular 和您的 express 应用程序之间存在路由冲突。 Angular 在一条路线上提供服务（我猜是 / 路线），然后它有点像 "hijacks" 用户导航。它通过不实际更改网页来实现此目的，而只是更改导航栏中的 URL，但实际上从未发出 Web 请求以获取该资源。

然后您在 Web 服务器上获得了端点，这些端点正在侦听这些端点。这意味着当您访问 /posts 页面时，您并没有要求 angular 做任何事情。事实上，angular 甚至没有加载，因为它只在 / 路由上加载。相反，您将直接前往 API.

有很多方法可以解决这个问题，首先许多人将他们的 API 完全分开，要么放在子域上，要么安装在 /api 上（例如 /api/posts）。然后你的 angular 应用可以在 / 路由上运行。您还可以使用其他技术允许用户转到 /posts 并仍然加载您的 angular 应用程序。

您可以为此使用一些方法，例如 hash location strategy，或者您可以从应用程序上的任何路由（* 在 express 中）提供您的 angular 应用程序，并且加载 angular 应用程序，然后它将接管。第二种方法是大多数评论，它通常会导致在子域上托管您的 api，然后在普通域名的 * 路由上为您的 angular 应用程序提供服务。例如：api.myapp.com 将仅提供 JSON 响应，但 myapp.com 上的任何路由都将提供 angular 应用程序，例如 myapp.com/posts。

Node.js / Express.js + Angular 路由器 - 使用直接 link 时服务器用响应对象覆盖客户端视图

Node.js / Express.js + Angular router - server overwriting client view with response object when using direct link

node.js

express

angular-router