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

Question

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

当我使用角度路由器在网站上导航时，但当我直接尝试访问链接时，应用程序运行且托管工作正常，例如:http://192.168.1.4:3000/posts ，网站的整个主体只是 JSON 响应对象，没有应用程序

这是处理 get 请求的 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));
})

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

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

再次，当我使用托管在公共(public)文件夹中并使用 ng build --prod 构建的 Angular 5 客户端应用程序时，将从 mongodb 数据库中检索 JSON 对象，并与应用程序的其余部分、页眉、正文和页脚一起正确显示在我的网站上。

还值得注意的是，使用直接链接时，ngOnInit() 上的 console.log 不会显示在浏览器上。

非常感谢任何建议/修复

Answer 1

您的 Angular 和 Express 应用程序之间存在路由冲突。 Angular 在一条路线上提供服务(我猜是 / 路线)，然后它有点“劫持”用户的导航。它通过不实际更改网页来实现此目的，而只是更改导航栏中的 URL，但从未实际发出 Web 请求来访问该资源。

然后，您就可以在 Web 服务器上获得监听这些端点的端点。这意味着当您访问 /posts 页面时，您不会要求 Angular 执行任何操作。事实上，Angular 甚至没有加载，因为它只在 / 路由上加载。相反，您将直接使用 API。

有很多方法可以解决这个问题，首先，许多人将他们的 API 相当独立地放置，要么放在子域上，要么安装在 /api 上(例如 /api/posts)。然后你的角度应用程序可以在 / 路线上提供。您还可以使用其他技术来允许用户转到 /posts 并仍然加载您的 Angular 应用程序。

您可以使用几种方法来实现此目的，例如 hash location strategy ，或者您可以从应用程序上的任何路径(express 中的 *)提供 Angular 应用程序，并加载 Angular 应用程序，然后它将接管。第二种方法是最受关注的，它通常会导致将您的 api 托管在子域上，然后在普通域名的 * 路由上提供您的角度应用程序。例如: api.myapp.com 将仅提供 JSON 响应，但 myapp.com 上的任何路由都将提供 Angular 应用程序，例如 myapp.com/posts。