如何在同一GCP Bucket部署多个Angular项目且避免多index.html？

1. 重构为统一Angular应用（核心方案） #

要实现单份index.html部署，最直接的方式是把ng-admin和ng-supplier的功能整合到同一个Angular应用中，通过路由区分访问路径，构建后只会生成一套产物文件。

具体操作： #

• 选择其中一个现有项目作为主应用（或新建一个空Angular应用）
• 将另一个项目的组件、服务、页面等代码迁移到主应用中，封装为独立的路由模块
• 在主应用的路由配置中，通过路径区分两个功能模块，推荐用懒加载优化性能：

  // app-routing.module.ts
  const routes: Routes = [
    { 
      path: 'admin', 
      loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) 
    },
    { 
      path: 'supplier', 
      loadChildren: () => import('./supplier/supplier.module').then(m => m.SupplierModule) 
    },
    { path: '', redirectTo: '/admin', pathMatch: 'full' }
  ];
  

• 执行ng build命令，生成单份dist目录，包含唯一的index.html、main.js及配套资源

2. 部署到GCP Bucket #

将构建完成的dist目录内容上传至目标Bucket（admin-9880）：

• 可通过GCP控制台直接拖拽上传文件
• 或使用gcloud命令行工具批量上传：

  gsutil cp -r dist/* gs://admin-9880/
  

• 配置Bucket为静态网站托管：设置index.html为默认主页，同时将404页面也指向index.html（确保Angular路由能正常跳转）

不推荐的替代方案 #

如果暂时不想重构代码，也可以将两个项目的dist分别上传到Bucket的子目录（如/admin和/supplier），但这会产生两份index.html，不符合你“仅保留一份构建产物”的要求，因此不建议采用。

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