实战经验：使用 Angular、Qiankun 和 Single SPA 实现微前端编程

最新推荐文章于 2025-06-09 10:10:00 发布
最新推荐文章于 2025-06-09 10:10:00 发布
阅读量176 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 angular.js javascript 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechO_O/article/details/133552218
编程 专栏收录该内容
407 篇文章 ¥29.90 ¥99.00
订阅专栏
本文详细介绍了如何利用 Angular、Qiankun 和 Single SPA 构建微前端应用。通过Angular作为主应用，结合Qiankun的路由隔离和状态管理，以及Single SPA的API，实现了多前端应用在同一页面的集成和协同工作，促进了团队的独立开发和部署。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微前端是一种架构模式，旨在将大型前端应用程序拆分为更小、可管理的部分，以实现团队间的独立开发和部署。在本文中，我们将探讨如何使用 Angular、Qiankun 和 Single SPA 这三个工具来实现微前端编程。

  1. Angular：Angular 是一个功能强大的前端框架，用于构建复杂的单页应用程序。它提供了丰富的工具和功能，包括组件化开发、依赖注入、模块化和路由等。我们将使用 Angular 来构建和管理我们的微前端应用的核心模块。

  2. Qiankun：Qiankun 是一个基于 Single SPA 的微前端解决方案。它提供了一套完整的工具和框架，用于将多个独立的前端应用集成到一个统一的应用程序中。Qiankun 具有路由隔离、状态管理、样式隔离等特性，使得不同的前端应用可以在同一个页面上协同工作。

  3. Single SPA：Single SPA 是一个用于将多个前端应用集成到一个页面的 JavaScript 框架。它提供了一套简单易用的 API，用于加载、卸载和通信不同的应用程序。Single SPA 可以与任何前端框架（如 Angular、React、Vue 等）配合使用，使得不同框架之间的应用可以无缝集成。

接下来，我们将详细介绍如何使用这三个工具来构建微前端应用。假设我们有两个独立的前端应用，一个是 Angular 应用，另一个是 React 应用。我们将使用 Qiankun 和 Single SPA 将这两个应用集成到一个页面中。

首先，我们需要创建一个主应用，用于加载和管理其他应用。我们使用 Angular 创建一个新的项目：


                

                
                
        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
实战微前端：Angular、Qiankun与Single Spa编程

				
			

			

				

					DevPulse的博客
				

				

					10-04
					
					179
					
				

			

		

		

			
				
在本文中，我们将介绍如何使用Angular、Qiankun和Single Spa来实践微前端架构，并提供相应的源代码示例。在本文中，我们将介绍如何使用Angular、Qiankun和Single Spa来实践微前端架构，并提供相应的源代码示例。在上述代码中，我们注册了两个微前端应用：sub-app-1和sub-app-2。在上述代码中，我们注册了两个微前端应用：sub-app-1和sub-app-2。在上述代码中，我们注册了一个微前端应用：sub-app-1。这将在不同的端口上启动主应用和子应用。

			
		

	



                

            
              



	

		

			

				
					
angular18使用qiankun搭建微服务

				
			

			

				

					qq_45915779的博客
				

				

					08-27
					
					1208
					
				

			

		

		

			
				
在angular18版本中使用微服务。

			
		

	



              


  
              

                


	

		

			

				
					
qiankun-angular-angularjs:基于 qiankun，主应用为 angular，子应用为angularjs

				
			

			

				

					05-29
				

			

		

		

			
				
QiankunAngularAngularjs
基于qiankun,实现了在angular9主应用下挂angularjs子应用的范例。可实现angularjs和angular9优雅共存，增量迁移。本工程只是对qiankun官网样例的补充，如果想要详细了解qiankun请访问官网：https://qiankun.umijs.org/
工程启动
在主应用与子应用下先分别完成依赖的安装
npm install
启动主应用
npm run start:main
启动 angularjs 子应用
npm run start:angularjs
启动 angular9 子应用
npm run start:angular9
运行效果
切换angular9
切换angularjs
参考资料
qiankun: https://qiankun.umijs.org/
single-spa/ecosystem/a

			
		

	





	

		

			

				
					
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

					
最新发布

				
			

			

				

					qq_44327851的博客
				

				

					06-09
					
					968
					
				

			

		

		

			
				
使用 Webpack 5 的 ModuleFederationPlugin 实现了主应用与子应用的动态模块共享。通过npx-build-plus扩展了 Angular CLI 的构建功能，支持自定义 Webpack 配置。采用@angular-architects/module-federation提供的 loadRemoteModule实现了 Angular 路由的懒加载远程模块。

			
		

	



		

			
		



	

		

			

				
					
qiankun 微前端_从零开始创建以Angular为基座项目的qiankun微前端项目

				
			

			

				

					weixin_39816024的博客
				

				

					12-07
					
					1542
					
				

			

		

		

			
				
一、创建及配置基座项目- 创建Angular项目命令：ng n main。询问是否需要路由时，选择Yes- 添加依赖所需依赖：qiankun，qiankun-ng-common命令：npm i qiankun qiankun-ng-common -S- 配置默认路由app-routing.module.tsimport { NgModule } from '@angular/core';
impo...

			
		

	





	

		

			

				
					
Angular框架开发前端

				
			

			

				

					weixin_43980838的博客
				

				

					12-22
					
					1149
					
				

			

		

		

			
				
Angular框架开发前端前言项目开发开发环境初始化项目修改项目设置路由个人信息页面搜索框遇到问题数据更新动态获取输入框数据结语
前言
这次前端开发用到angular中Ng-Matero框架，该框架对于大致实现了一个类似博客页面的模板，包括登陆注册页面，以及一个首页。这次实验的前端开发就是基于该模板进行的。
项目开发
开发环境

ubuntu操作系统
node.js
npm
angular-cli

angular-cli可以参考该博客
初始化项目

使用 ng new <project-name&g

			
		

	





	

		

			

				
					
微前端框架选型指南：Module Federation、Qiankun 和 Single-SPA 对比

				
			

			

				

					一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
				

				

					01-06
					
					1571
					
				

			

		

		

			
				
微前端并不是“银弹”，它解决了一些大项目中的痛点，但也带来了额外的复杂性。选择框架时，不仅要考虑当前需求，还要着眼未来的扩展性和维护成本。如果你是一个追求性能的技术狂热者，可以尝试 Module Federation；如果你是想快速落地微前端的团队负责人，Qiankun 会是你的好帮手；而如果你是自由度至上的架构师，Single-SPA 将是你的首选。微前端的世界很大，选好框架，分而治之，你的项目将会焕发新的生机！

			
		

	





	

		

			

				
					
Vue微前端架构与Qiankun实践理论指南

				
			

			

				

					
				

				

					06-15
					
					1410
					
				

			

		

		

			
				
这篇文章介绍了微前端架构概念，聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化，以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应用与子应用的通信，以及如何解决跨域问题和优化集成过程，从而实现前端应用的灵活扩展与组织。

			
		

	





	

		

			

				
					
qiankun 微前端创建angular17主应用

				
			

			

				

					m0_37609394的博客
				

				

					04-15
					
					534
					
				

			

		

		

			
				
【代码】qiankun 微前端创建angular17主应用。

			
		

	





	

		

			

				
					
angular项目启动命令_从零开始创建以Angular为基座项目的qiankun微前端项目

				
			

			

				

					weixin_39627405的博客
				

				

					01-31
					
					942
					
				

			

		

		

			
				
一、创建及配置基座项目- 创建Angular项目命令：ng n main。询问是否需要路由时，选择Yes- 添加依赖所需依赖：qiankun，qiankun-ng-common命令：npm i qiankun qiankun-ng-common -S- 配置默认路由app-routing.module.tsimport { NgModule } from '@angular/core';
impo...

			
		

	





	

		

			

				
					
angular 8版本以上使用qiankun

				
			

			

				

					qq_43527485的博客
				

				

					03-28
					
					335
					
				

			

		

		

			
				
在完成上述配置后，即可启动项目并访问主应用，访问特定的路径时，qiankun会自动加载对应的子应用。方法来共享状态，该方法需要传入一个数组，里面的元素是要共享的状态名称。在Angular项目中的主应用（即父应用）中，需要在。搜索引擎接入GPT真无敌了，再也忍不了百度的搜索。在Angular项目中的子应用中，需要在。需要注意的是，需要使用。需要注意的是，需要在。

			
		

	





	

		

			

				
					
angular-qiankun-base-demo:前昆的URL更改错误

				
			

			

				

					04-23
				

			

		

		

			
				
根据
该项目是使用版本10.2.0生成的。
开发服务器
为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。
代码脚手架
运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。
建造
运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。
运行单元测试
运行ng test以通过执行单元测试。
运行端到端测试
运行ng e2e通过执行端到端测试。
进一步的帮助
要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。

			
		

	





	

		

			

				
					
【前端知识】微前端框架qiankun

				
			

			

				

					wendao76的专栏
				

				

					12-10
					
					7816
					
				

			

		

		

			
				
Qiankun是一款由蚂蚁金服推出的微前端框架，它基于single-spa进行二次开发，旨在将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。Qiankun是一款功能强大的微前端框架，它通过将大型前端应用拆分为多个小型应用，提高了开发效率和可维护性。同时，Qiankun提供了沙箱机制，确保了微应用之间的隔离性。然而，Qiankun也存在一些局限性，如不支持多实例场景、对Vite等构建工具的支持不够友好等。因此，在选择是否使用Qiankun时，需要根据具体项目的需求和团队的技术栈进行综合考虑。

			
		

	





	

		

			

				
					
Angular微前端

				
			

			

				

					weixin_44889399的博客
				

				

					09-12
					
					2673
					
				

			

		

		

			
				
Portal

安装版本对应的依赖包
@angular/cdk

@worktile/planet

以angular 8 为例















子应用准备好之后









































子应用的的构建方式：

@angular/cdk

@worktile/planet

@angular-builders/custom-webpack 这安装在开发环境即可（要挂载到portal的子应用都要使用到该插件）



以angula...

			
		

	





	

		

			

				
					
Angular 14微前端项目构建

				
			

			

				

					lvxinaidou的博客
				

				

					07-19
					
					1434
					
				

			

		

		

			
				
angular 14微前端项目构建

			
		

	





	

		

			

				
					
基于qiankun搭建ng-alain15微前端项目入门实践

				
			

			

				

					mjnmjn000的博客
				

				

					02-22
					
					501
					
				

			

		

		

			
				
基于qiankun搭建ng-alain15微前端项目入门实践

			
		

	





	

		

			

				
					
全面分析一下前端框架Angular的来龙去脉，分析angular的技术要点和难点，以及详细的语法和使用规则，底层原理-小白进阶之路

				
			

			

				

					zhang9880000的博客
				

				

					06-23
					
					4710
					
				

			

		

		

			
				
Angular 是一个由 Google 维护的开源前端框架。它最早在 2010 年发布，最初版本称为 AngularJS。2016 年，团队发布了一个完全重写的版本，称为 Angular 2，之后的版本（如 Angular 4、Angular 5 等）都统称为 Angular。Angular 使用 TypeScript 编写，提供了静态类型检查、现代 JavaScript 特性等优点，有助于提高代码质量和开发效率。采用组件式开发，将应用程序分割成独立的、可复用的组件，每个组件包含自己的模板、样式和逻辑。使用

			
		

	





	

		

			

				
					
探索微前端新境界：ngx-planet —— 专为 Angular 打造的微前端框架

				
			

			

				

					gitblog_00697的博客
				

				

					09-10
					
					398
					
				

			

		

		

			
				
探索微前端新境界：ngx-planet —— 专为 Angular 打造的微前端框架
在现代前端开发中，微前端架构已经成为构建复杂应用的重要手段。然而，选择一个合适的微前端框架并不容易，尤其是在 Angular 生态中。今天，我们将向您推荐一款专为 Angular 打造的微前端框架——ngx-planet，它不仅功能强大、可靠，而且完全符合 Angular 的开发风格，是您构建微前端应用的理想选择...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值