如何在同一Angular项目中实现两个内部应用的路由切换？

你的需求完全可以实现！虽然Angular是单页应用（SPA），但结合它的多项目配置能力和反向代理机制，完全能做到通过localhost:4000/app1和localhost:4000/app2分别访问两个独立应用。下面给你两种最实用的方案：

方案一：多项目架构 + 反向代理（推荐，保留双应用独立性） #

你已经在angular.json里配置了my-app和my-app-two两个独立项目，这个基础很好，只需要添加反向代理配置，让不同路径转发到两个应用的服务端口即可：

1. 启动两个应用在不同端口
   打开两个终端，分别启动两个应用并指定不同端口：

   # 启动app1在4200端口
   ng serve my-app --port 4200
   # 启动app2在4201端口
   ng serve my-app-two --port 4201
   

2. 创建反向代理配置文件
   在项目根目录新建proxy.conf.json文件，配置路径转发规则：

   {
     "/app1": {
       "target": "http://localhost:4200",
       "pathRewrite": {"^/app1": ""},
       "changeOrigin": true
     },
     "/app2": {
       "target": "http://localhost:4201",
       "pathRewrite": {"^/app2": ""},
       "changeOrigin": true
     }
   }
   

   这个配置的作用是：当你访问localhost:4000/app1时，请求会被转发到localhost:4200，同时自动去掉路径中的/app1；/app2路径则会转发到4201端口，保证两个应用的路由逻辑不受影响。

3. 启动代理服务器
   我们用http-server来搭建代理（简单易用）：

   • 先全局安装工具：

     npm install -g http-server
     

   • 然后启动代理服务器，指定4000端口并加载配置：

     http-server -p 4000 --proxy http://localhost:4000
     

   现在你就能通过localhost:4000/app1访问app1，localhost:4000/app2访问app2了，两个应用完全独立，各自维护代码即可。

方案二：将其中一个应用转为Angular库，集成到主应用（适合需共享代码的场景） #

如果两个应用有较多共享组件/服务，或者你想让它们在同一个SPA运行时中运行，可以把其中一个应用打包成Angular库，然后在主应用中通过路由懒加载访问：

1. 将app2转为Angular库
   在项目根目录执行命令创建库：

   ng generate library gestion-de-risque-lib
   

   接着把gestionDeRisque目录下的组件、服务、路由等代码迁移到新建的库中，调整导入路径适配库的结构。

2. 在主应用（app1）中配置懒加载路由
   修改src/app/app-routing.module.ts，添加app2模块的懒加载路由：

   const routes: Routes = [
     // app1原有路由
     { path: '', component: App1HomeComponent },
     // 懒加载app2的库模块
     { 
       path: 'app2', 
       loadChildren: () => import('gestion-de-risque-lib').then(m => m.GestionDeRisqueLibModule) 
     }
   ];
   

3. 启动主应用
   现在只需要启动主应用即可：

   ng serve my-app --port 4000
   

   访问localhost:4000是app1的内容，localhost:4000/app2则会加载app2的模块，这种方式下两个应用共享Angular运行时，适合需要紧密集成的场景。

额外建议 #

• 生产环境部署时，你可以分别构建两个应用，然后用Nginx或Apache配置反向代理规则，逻辑和开发环境一致。
• 如果是大型项目，推荐用NX monorepo来管理多个Angular应用，它自带多应用的路由、构建和部署支持，能更高效地维护项目。

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