Angular 15如何从npm加载已编译微前端并在开发环境路由？

你的需求完全可行，以下是Angular 15开发环境下加载node_modules中已编译微前端的具体实现方案：

核心思路 #

通过Angular开发服务器的代理配置，将http://localhost:3000的请求映射到node_modules内微前端包的对应目录，同时用环境变量区分开发/生产环境的微前端清单配置，实现环境隔离。

具体实现步骤 #

1. 配置开发服务器代理 #

在Shell项目根目录创建proxy.conf.json文件，添加代理规则：

{
  "/remoteEntry.js": {
    "target": "http://localhost:4200",
    "pathRewrite": {
      "^/remoteEntry.js": "/node_modules/你的微前端包名/remoteEntry.js"
    },
    "changeOrigin": true
  },
  "/assets": {
    "target": "http://localhost:4200",
    "pathRewrite": {
      "^/assets": "/node_modules/你的微前端包名/assets"
    },
    "changeOrigin": true
  }
}

替换你的微前端包名为实际从npm下载的包名称，比如@your-org/mfe1。

接着修改angular.json中serve配置的proxyConfig字段，关联这个代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "shell:build",
    "proxyConfig": "proxy.conf.json"
  }
}

2. 区分环境的清单配置 #

在src/environments目录下创建两个环境配置文件：

• environment.ts（开发环境）

export const environment = {
  production: false,
  mfeManifest: {
    "mfe1": "http://localhost:3000/remoteEntry.js"
  }
};

• environment.prod.ts（生产环境）

export const environment = {
  production: true,
  mfeManifest: {
    "mfe1": "https://你的生产服务器域名/mfe1/remoteEntry.js"
  }
};

代码中直接通过environment.mfeManifest获取对应环境的微前端入口地址，避免硬编码。

3. 确保微前端包结构合规 #

从npm下载的微前端包需包含完整编译产物，目录结构需类似：

node_modules/你的微前端包名/
├── remoteEntry.js
├── assets/
│   └── （微前端静态资源文件）
└── （其他编译生成的chunk文件）

若包结构不符，需调整微前端的打包配置，确保remoteEntry.js和静态资源直接放在包根目录，或修改代理配置中的路径匹配规则。

4. 验证加载效果 #

启动Shell应用的开发服务器后，浏览器请求http://localhost:3000/remoteEntry.js时，会被代理映射到node_modules中的对应文件，从而实现开发环境下加载本地npm包内的微前端。

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