angular利用module federation实现微前端 - 创建环境,并子项目暴露出AppModule给主项目使用

本项目使用的 angular 是 15.2.8 版本的,npm i @angular/cli@15.2.8 -g
为了好演示,两个项目就放在了一个 git 仓库中,但是两个不同仓库的项目也是可以使用的,原理是一样的

1. 创建环境

  • 创建一个没有项目的空壳子

    ng new shell --create-application=false
    
  • 进入到项目文件夹中,添加主应用和子应用 1

    ng g application main
    ng g application mfe1
    
  • 安装 @angular-architects/module-federation

    npm i @angular-architects/module-federation@15 -D
    
  • 初始化主项目和子项目

    ng g @angular-architects/module-federation:init --project main --port 9000
    ng g @angular-architects/module-federation:init --project mfe1 --port 9001
    

到现在为止两个项目都创建好了,webpack 的 module federation 也都安装

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值