【源码】基于 Angular 框架的微前端应用示例

项目简介

本项目是基于 Angular 框架搭建的微前端应用示例。通过 Angular Elements 技术构建组件级别的微前端架构，包含一个主应用（MF Demo）和多个独立应用（如 MF Element 1），支持应用的独立开发与部署，主应用能够调用独立应用的功能。

项目的主要特性和功能

1. 微前端架构：利用 Angular Elements 技术实现组件级微前端架构，支持应用组件独立开发与部署。
2. 自定义元素：借助 Angular CLI 生成自定义元素，组件可在非 Angular 环境使用。
3. Polyfills 支持：为不支持自定义元素的浏览器引入必要的 Polyfills，确保功能正常。
4. 模块化打包：使用 ngx - build - plus 插件进行应用模块化打包，便于部署和加载。
5. 懒加载集成：通过 @angular - extensions/elements 库实现元素懒加载集成，优化性能。

安装使用步骤

假设用户已下载本项目的源码文件，可按以下步骤操作： 1. 安装依赖：在项目根目录下执行 yarn 命令。 2. 生成自定义元素：执行 ng g application mfdemo1 --routing --style=scss 和 ng g application mf - element1 --routing --style=scss 分别生成主应用和独立应用。 3. 添加 Angular Elements 支持：在主应用项目中执行 ng add @angular/elements --project=mfdemo1。 4. 扩展 Angular CLI：执行 ng add ngx - build - plus --project=mfdemo1。 5. 配置打包：根据项目需求配置打包选项，如输出哈希、单文件打包等。 6. 打包应用：依次执行 yarn build:mfdemo1 和 yarn build:mf - element1:deploy 打包主应用和独立应用，并将独立应用文件复制到主应用的 dist 目录。 7. 启动服务：执行 yarn serve:mfdemo1 启动主应用的本地服务，查看打包效果。

执行过程中需按照项目文件说明操作，例如修改文件路径、引入必要依赖等。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】