import { Component1, Service1 } from 'my-library'; Multi-Entry Point Library 的创建 创建一个多入口点库相对来说需要一些额外的配置和目录结构调整。 创建Angular 工作区并创建库: ng new my-workspace --create-application=falseng generate library my-library 调整目录结构以支持多入口点: 创建多个子模块...
{SingleSpaContext} from 'single-spa-react'; const reactLifecycles = singleSpaReact({ React, ReactDOM, rootComponent: SubApp, errorBoundary(err, info, props) { return ( 出错啦! ); }
首先,我们使用 single-spa-angular 生成一套配置,在命令行运行以下命令: ng add single-spa ng add single-spa-angular 在生成 single-spa 配置后,我们需要进行一些 qiankun 的接入配置。我们在 Angular 微应用的入口文件 main.single-spa.ts 中,导出 qiankun 主应用所需要的三个生命周期钩子函数,代码实现如下:...
First, setup your default interaction type in app.module.ts: TypeScript 複製 export function MSALGuardConfigFactory(): MsalGuardConfiguration { return { interactionType: InteractionType.Redirect, }; } Then, define a login method in app.component.ts as f...
import'./components/home.component'; angular.module('home-app') .config(['$stateProvider','$locationProvider',($stateProvider, $locationProvider) =>{ $locationProvider.html5Mode({enabled:true,requireBase:false, }); $stateProvider.state('home', {url:'/',template:'<home-component />', }...
setup app routing inapp.module.ts constappRoutes:Routes=[{path:'*',component:AppComponent}...];@NgModule({declarations:[AppComponent,...],imports:[BrowserModule,RouterModule.forRoot(appRoutes)],providers:[{provide:APP_BASE_HREF,useValue:mooaPlatform.appBase()},],bootstrap:[AppComponent]})expo...
将普通的angular项目改成主应用基座 1在layout页面添加微应用容器 <nz-contentclass="content"><router-outlet></router-outlet> </nz-content> 2 注册微应用 export class AppComponent implements OnInit { CONTAINER= '#micro-app-container'; microApps=[]; constructor(private router...
适用场景:项目庞大,多个子项目整合在一个大的项目中。即使子项目的所用的技术栈不同,比如vue,react, angular有相应的single-spa的轮子,可以进行整合。 不适用于: (1)< ie9 以下的版本 (2)项目不大型,不需要切分 (3)项目应用之间没有必然的联系
简单来说importmap的作用就是使浏览器端支持模块的解析,而不需要应用构建步骤,这使得前端开发更便捷了,但是import maps现在来使用的话存在一个缺点,就是需要所有模块都导出成 ESModule,当前社区当中的很多模块都没有导出成 ESModule,有些模块甚至没有经过编译,所以目前使用仍然有一定困难。
这就给我们一个启发:能不能有这么一个巨型 SPA 框架,把现有的 SPA 当成 Page Component 来组装成一个新的 SPA 呢?这就是微前端的由来。 微前端是什么 微前端应该有如下特点: 技术栈无关,主框架不限制接入应用的技术栈,微应用具备完全自主权 独立开发、独立部署,微应用仓库独立,前后端可独立开发,部署完成后主...