微前端-angular+qiankun+single-spa(一)

引言

大家好~

本文是基于 qiankun + single-spa 的微前端最佳实践系列文章之 从 0 到 1 篇,本文将分享如何使用 qiankun + single-spa 如何搭建主应用基座,然后接入不同技术栈的微应用,完成微前端架构的从 0 到 1。

本教程采用 Angular 作为主应用基座,接入不同的子Angular项目。

为什么需要微前端(Micro Front-end)

  1. 系统模块增多,单体应用变得臃肿,开发效率低下,构建速度变慢;
  2. 人员扩大,需要多个前端团队独立开发,独立部署,如果都在一个仓储中开发会带来一些列问题;
  3. 解决遗留系统,新模块需要使用最新的框架和技术,旧系统还继续使用。

构建Angular主应用基座

我们先使用 Angular-cli 生成一个 Angular 的项目,初始化主应用。

ng new mango-pro --skipTests=true  --style=less --prefix=mango

--style=less 用于样式文件的文件扩展名或预处理器。

--skipTests=true 如果为true,则不会为新项目生成"spec.ts"测试文件。

--prefix mango 适用于初始项目的生成选择器的前缀。

在主应用中安装 qiankun

npm i qiankun -S

将普通的项目改造成 qiankun 主应用基座,需要进行三步操作:

  • 创建微应用容器 - 用于承载微应用,渲染显示微应用
  • 注册微应用 - 设置微应用激活条件,微应用地址等等;
  • 启动 qiankun;

创建微应用容器

注册微应用

启动

原文链接:juejin.im

上一篇:JS 数据类型的种类、判断以及转换
下一篇:深浅拷贝和extend实现

相关推荐

  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    3 年前
  • 高级 Angular 组件模式 (3a)

    03a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components ...

    3 年前
  • 问道Angular——Angular设置别名alias

    设置别名   在根目录下tsconfig.json中添加baseUrl和paths 访问环境变量   添加了@env别名,以便能够import { environment } fro...

    2 年前
  • 问道Angular——Angular刷新当前页面

    onSameUrlNavigation   从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、   有两个值'reload'和'ignore'。

    2 年前
  • 问道Angular——APP_INITIALIZER

    概述   有时需要在加载应用之前运行代码,有时希望暂停应用初始化,直到完成某些限制之后再执行。APPINITIALIZER令牌可以完成这项操作。 APPINITIALIZER是一个函数,在应用改程...

    2 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    9 个月前
  • 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网(https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 139239201904181526...

    1 年前
  • 通过框架设计理解react、angular、vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    8 个月前
  • 通过框架设计理解React、Angular、Vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    8 个月前
  • 转载 | 什么是单点登录(SSO Single-Sign-On)?

    (https://img.javascriptcn.com/06ecf07d285ba9e7d0d8fb8584c6e161) 在日常工作中,用户需要访问大量的信息资源,例如,用户首先要登录到操作系...

    10 个月前

官方社区

扫码加入 JavaScript 社区