如何使用Angular部署微前端

嗨，很高兴你已经用Angular Module Federation搭好微前端项目并跑通了！关于把项目构建部署到本地服务器，同时确保远程应用能正确连接的问题，我来一步步帮你理清思路：

一、先给所有微前端应用做生产构建 #

首先，你得给主应用（Shell）和每个远程应用都执行构建命令——别只构建主应用哦，远程应用的产物是主应用要加载的核心资源：

# 进入主应用目录执行
ng build --output-hashing all --base-href /shell/

# 进入每个远程应用目录执行，比如远程应用app1
ng build --output-hashing all --base-href /app1/

这里的--output-hashing all是为了避免浏览器缓存旧资源，--base-href是设置应用在服务器上的基础路径，等下部署时要对应上服务器的目录结构。

构建完成后，每个项目的dist文件夹里就是部署需要的静态文件了。

二、调整Module Federation的连接配置 #

这是最关键的一步！开发阶段你可能用的是localhost:xxxx这样的本地端口地址，但部署到服务器后，得把远程应用的入口地址改成服务器上的实际路径：

1. 主应用（Shell）的配置 #

找到主应用里的Module Federation配置文件（通常是src/mf.ts或者webpack.config.js），修改remotes字段里的远程应用地址：

// 开发时的配置可能是这样的
remotes: {
  app1: 'app1@http://localhost:4201/remoteEntry.js',
},

// 部署到本地服务器后要改成服务器上的路径，比如
remotes: {
  app1: 'app1@/app1/remoteEntry.js',
  // 如果服务器有域名/IP，也可以写完整URL：'app1@http://192.168.1.100:8080/app1/remoteEntry.js'
},

改完后记得重新构建主应用，让配置生效。

2. 远程应用的配置 #

远程应用的mf.ts或webpack.config.js里，确保publicPath设置正确（如果用@angular-architects的Module Federation，这个值会自动匹配--base-href，但最好检查一下）：

new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Module': './src/app/app1.module.ts',
  },
  publicPath: '/app1/', // 要和构建时的--base-href一致
}),

三、部署到本地服务器 #

我推荐用http-server来快速搭建本地静态服务器，步骤如下：

1. 先全局安装：

npm install -g http-server

2. 创建一个统一的部署文件夹，比如mf-deploy，把所有构建好的dist文件夹都放进去，目录结构大概是这样：

mf-deploy/
├─ shell/          # 主应用的dist产物
├─ app1/           # 远程应用app1的dist产物
└─ app2/           # 远程应用app2的dist产物

3. 进入mf-deploy目录，启动服务器：

http-server -p 8080

四、验证连接是否正常 #

现在访问主应用的地址：http://localhost:8080/shell，尝试加载远程模块。如果遇到问题，打开浏览器控制台排查：

• 如果出现404错误，检查remoteEntry.js的路径是否和配置一致；
• 如果加载模块失败，检查远程应用的exposes配置是否正确，主应用有没有正确导入远程模块。

常见小提示 #

• 如果你的本地服务器有其他端口占用，换个端口号就行，比如http-server -p 9000；
• 要是担心缓存问题，构建时的--output-hashing all一定要加上，每次构建的资源文件名都会带哈希值；
• 如果你用其他本地服务器（比如Nginx），只要把静态文件放在对应目录，配置好根路径就行，原理和上面一样。

备注：内容来源于stack exchange，提问作者Neha