如何在单个Angular应用中运行多个独立项目？

先澄清你的理解误区 #

Angular 单应用本身是单入口、共享依赖池的架构，你现在直接在父AppComponent里导入子项目的AppComponent，本质就是把子项目的组件当成普通业务组件拆分，并非真正的“独立项目”——独立项目需要具备独立的构建入口、配置文件、资源隔离能力，而不是共用同一个应用的构建流程。

可行方案 #

方案1：使用 Angular Workspace（官方推荐） #

这是Angular官方支持的多项目管理方式，能实现：

• 每个子项目拥有独立的index.html、angular.json配置项、全局样式
• 共享根目录的node_modules（也可给特定项目单独安装依赖，但一般没必要，工作区会统一管理版本）
• 支持单独启动、构建任意子项目，也可通过路由实现宿主应用对子项目模块的懒加载

解决你当前的全局样式问题：

如果需要在宿主应用中复用子项目的组件，子项目的全局样式不会自动被宿主应用的构建流程包含，你需要：

1. 在宿主应用的angular.json的styles数组中，手动导入子项目的全局样式文件，比如：

   "styles": [
     "src/styles.css",
     "projects/project1/src/styles.css"
   ]
   

2. 或者给子项目的组件启用ViewEncapsulation.None（不推荐，容易样式冲突），把组件相关样式封装进组件本身。

方案2：微前端（Module Federation） #

如果追求完全独立的node_modules、完全隔离的构建流程，可以用Angular 14+支持的Module Federation实现微前端集成：

• 每个子项目是独立的Angular应用，拥有自己的node_modules、index.html、构建配置
• 宿主应用作为host，子项目作为remote，通过远程加载的方式把子项目的模块嵌入宿主应用
• 子项目的全局样式、依赖会随远程模块一起加载，完全隔离，不会和宿主应用冲突

核心配置思路：

1. 在子项目的webpack.config.js（或通过Angular CLI的自定义配置）中，配置为remote，暴露需要共享的模块：

   module.exports = {
     plugins: [
       new ModuleFederationPlugin({
         name: 'project1',
         filename: 'remoteEntry.js',
         exposes: {
           './AppComponent': './src/app/app.component.ts',
         },
       }),
     ],
   };
   

2. 在宿主应用的配置中，添加remote的引用，然后通过路由或组件懒加载的方式加载子项目模块。

不推荐的方案 #

直接在单应用中手动拆分多个“项目文件夹”并导入组件，这种方式既没有官方支持，也无法实现真正的资源隔离，后续会遇到样式冲突、依赖版本不一致、构建流程混乱等问题。

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