如何在本地服务器同时运行两个Angular 6项目并实现组件跳转？

没问题！这两个需求完全可以实现，我给你拆解成两步讲清楚：

Angular项目默认启动端口是4200，只要给第二个项目指定不同端口就能同时运行：

• 前端展示项目：在它的根目录运行 ng serve，启动后访问地址是 http://localhost:4200
• 后端管理面板项目：在它的根目录运行 ng serve --port 4201（端口可以随便选，只要不被占用就行），启动后访问地址是 http://localhost:4201
  要是想启动时自动打开浏览器，还可以加 --open 参数，比如 ng serve --port 4201 --open。

因为这是两个完全独立的Angular应用，没法直接用Angular自带的路由（比如Router.navigate）跳转到另一个项目的组件——毕竟它们的路由系统是各自独立的。我们得用浏览器原生的跳转方式：

1. 替换当前页面跳转 #

比如在前端项目的某个组件里，给按钮加个点击事件，直接跳转到管理面板的目标组件：

// 前端项目组件中的代码示例
goToAdminDashboard() {
  // 假设管理面板的目标组件路由是/dashboard，替换成你实际的路由路径
  window.location.href = 'http://localhost:4201/dashboard';
}

2. 新标签页打开跳转 #

如果想在新标签页打开管理面板的组件，用window.open就行：

// 前端项目组件中的代码示例
openAdminDashboardInNewTab() {
  window.open('http://localhost:4201/dashboard', '_blank');
}

几个注意点 #

• 开发环境要确保两个项目的端口不冲突；部署到生产环境后，把localhost:xxxx换成对应的域名或者服务器IP地址就行。
• 如果两个项目部署在不同域名下，后续涉及API调用、Cookie共享这类操作可能需要处理跨域，但单纯的页面跳转是不受跨域限制的。
• 跳转时要确认目标项目的组件路由路径是正确的，比如管理面板的路由配置里该组件的路径是什么，就用什么地址。

内容的提问来源于stack exchange，提问作者Faizan