同一工作区独立Express项目导入Angular模块报错如何解决

完全可以在技术层面相互独立、同工作区的Express服务端项目中导入Angular Universal模块，不需要合并前后端项目结构。你遇到的模块找不到报错，本质是ESM模块解析规则+导入路径指向错误导致的，和前后端分离的架构本身无关。

你当前的导入路径直接指向Angular源码目录下的./ui/src/main.server：

1. ESM模式下Node.js不会自动编译TS源码，也不会自动读取Angular项目的tsconfig配置做路径解析
2. Angular Universal的AppServerModule编译产物默认不会输出到源码src目录，你写的路径下根本不存在Node可识别的可执行模块，所以直接抛出找不到模块的错误。

全程不需要移动、合并两个项目的代码，只需要调整配置和路径即可：

• 第一步：先编译Angular Universal的服务端产物
  在Angular项目目录下执行SSR构建命令，默认构建完成后，服务端相关ESM产物会输出到dist/[你的Angular项目名]/server/目录下，其中就包含导出AppServerModule的main.server.mjs文件；浏览器端静态产物会输出到dist/[你的Angular项目名]/browser/目录。
• 第二步：修正Express侧的导入路径
  不要导入Angular源码目录下的文件，直接指向Angular构建完成的服务端产物即可。举个目录结构参考：

  工作区根目录
  ├── express-server/  # 独立Express项目
  │   └── src/
  │       └── app.ts    # Express入口文件
  └── angular-app/      # 独立Angular项目
      ├── src/
      └── dist/
          └── angular-app/
              ├── browser/ # 前端静态资源
              └── server/
                  └── main.server.mjs # 编译后的AppServerModule所在文件
  

  对应Express中的导入和引擎配置代码如下，注意根据你实际的目录层级、项目名调整相对路径，ESM导入要写全文件后缀：

  import { AppServerModule } from '../../angular-app/dist/angular-app/server/main.server.mjs';
  import { ngExpressEngine } from '@nguniversal/express-engine';
  
  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));
  

• 第三步：配置静态资源映射
  不需要把Angular的前端产物拷贝到Express项目中，直接在Express里配置静态资源目录指向Angular构建后的browser目录即可：

  import express from 'express';
  import { join } from 'node:path';
  
  app.use(express.static(join(process.cwd(), '../../angular-app/dist/angular-app/browser')));
  

• 第四步：调整启动流程
  配置脚本保证Express启动前，Angular的SSR产物已经构建完成，避免启动时找不到文件。可以在工作区根目录的package.json中配置统一启动命令：

  {
    "scripts": {
      "build:ui": "cd angular-app && npm run build:ssr",
      "start:server": "cd express-server && npm run start",
      "start": "npm run build:ui && npm run start:server"
    }
  }
  

• 两个项目均采用ESM规范的场景下，导入文件必须写全.mjs/.js后缀，Node的ESM解析逻辑不会自动补全扩展名
• 不建议为了直接导入TS源码给Express配置额外的TS编译规则匹配Angular项目配置，这种方式会让两个独立项目产生强耦合，违背分离架构的初衷
• 开发模式下可以单独给Angular配置watch构建模式，Express侧监听Angular产物目录的变化自动重启即可，不需要做项目合并

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