Node.js 结合后端(Express)和前端(Angular)路由

发布于02月01日

我想托管的Angular 应用程序及其后端在一个主机(我不确定这是否是一个好主意！).

我在NodeJS(express)应用程序中创建了一个web文件夹，并将Angular 部署的文件移到那里.此外，我将此文件夹设置为静态，以使assets资源对公众可用.

所有后端的API路径也都以/API/v1/*开头

当我打开主页(index.html)时，Angular SPA工作得很好，我可以轻松地在路由之间导航，但当我试图在新选项卡中打开任何前端路由时，Express无法处理该请求.

任何人都可以在此场景中分享的任何最佳实践都将不胜感激.

推荐答案

嗯，这样的方法可能适用于您的场景:

在您的特快JS中创建一条全面的路由.(这意味着如果它没有命中任何定义的路由，则此路由将捕获它)
在这个处理程序中，通过添加一些上下文(比如将目标URL作为查询字符串附加)，将其重定向到index.html路径
在您的Angular 根页面中，捕获以下查询字符串并导航到目标Angular 页面

它可能看起来像这样:

特快专线

const url = require("URL");

app.get('*', function (req, res) {
    res.redirect(url.format({
       pathname:"/", // assuming that index.html lies on root route
       query: {
          "navigateTo": req.url,
        }
     }));
})

角形APP根组件

// assuming this is the root component
@Component({ ... })
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        const { navigateTo } = params;
        if (navigateTo)
        {
            this.router.navigateByUrl(navigateTo);

        }
      }
    );
  }
}