qiankun微前端项⽬搭建Angular基座+Angular⼦应⽤基座、⼦应⽤配置全流
程。。。
拆分流程
base
npm i qiankun -S
angular安装在appponent.ts中
import{ registerMicroApps, start }from'qiankun';
registerMicroApps([
{
name:'reactApp',
entry:'//localhost:3000',
container:'#container',
activeRule:'/app-react',
},
{
name:'vueApp',
entry:'//localhost:8080',
container:'#container',
activeRule:'/app-vue',
},
{
name:'angularApp',
entry:'//localhost:4200',
container:'#container',
activeRule:'/app-angular',
},
]);
// 启动 qiankun
start();
npm i qiankun-ng-common -S
在dule.ts中
const routes: Routes =[
{
path:'**',
component: EmptyComponent // 配置默认路由，避免路由到⼦项⽬报错
}
];
subapp1
1. 在 src ⽬录新增 public-path.js ⽂件，内容为：
if(window.__POWERED_BY_QIANKUN__){
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2. 设置 history 模式路由的 base，src/dule.ts ⽂件：
+ import { APP_BASE_HREF } from '@angular/common';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
// @ts-ignore
+ providers: [{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/app-angular' : '/' }]
})
3. 修改⼊⼝⽂件，src/main.ts ⽂件。
import'./public-path';
import{ enableProdMode, NgModuleRef }from'@angular/core';
import{ platformBrowserDynamic }from'@angular/platform-browser-dynamic';
import{ AppModule }from'./dule';
import{ environment }from'./environments/environment';
if(environment.production){
enableProdMode();
}
let app:void| NgModuleRef<AppModule>;
async function render(){
app =await platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err)=&(err));
}
if(!(window as any).__POWERED_BY_QIANKUN__){
render();
}
export async function bootstrap(props: Object){
console.log(props);
}
export async function mount(props: Object){
render();
}
export async function unmount(props: Object){
console.log(props);
/
/ @ts-ignore
app.destroy();
}
4. 修改 webpack 打包配置
npm i @angular-builders/custom-webpack@9 -D
先安装 @angular-builders/custom-webpack 插件，注意：angular 9 项⽬只能安装 9.x 版本，angular 10 项⽬可以安装最新版。npm i @angular-builders/custom-webpack@9.2.0 -D
在根⽬录增加 fig.js ，内容为：
const appName =require('./package.json').name;
devServer:{
headers:{
'Access-Control-Allow-Origin':'*',
},
},
output:{
library:`${appName}-[name]`,
libraryTarget:'umd',
jsonpFunction:`webpackJsonp_${appName}`,
},
};
修改 angular.json，将 [packageName] > architect > build > builder 和 [packageName] > architect > serve > builder 的值改为我们安装的插件，将我们的打包配置⽂件加⼊到 [packageName] > architect > build > options。
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-builders/custom-webpack:browser",
"options": {
+ "customWebpackConfig": {
+ "path": "./fig.js"
+ }
}
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular-builders/custom-webpack:dev-server",
修改architect下build以及serve的builder配置
5. 解决 zone.js 的问题
Angular 运⾏依赖于 zone.js。
qiankun 基于 single-spa 实现，single-spa 明确指出⼀个项⽬的 zone.js 只能存在⼀份实例，所以我们在主应⽤注⼊ zone.js。
// micro-app-main/src/main.js
// 为 Angular 微应⽤所做的 zone 包注⼊
import "zone.js/dist/zone";
将微应⽤的 src/polyfills.ts ⾥⾯的引⼊ zone.js 代码删掉。
在微应⽤的 src/index.html ⾥⾯的 <head> 标签加上下⾯内容，微应⽤独⽴访问时使⽤。
<!-- 也可以使⽤其他的CDN/本地的包 -->
<script src="unpkg/zone.js"ignore></script>
6. 修正 ng build 打包报错问题，修改 tsconfig.json ⽂件，参考
- "target": "es2015",
+ "target": "es5",
+ "typeRoots": [
+ "node_modules/@types"
+ ],
7. 为了防⽌主应⽤或其他微应⽤也为 angular 时，<app-root></app-root> 会冲突的问题，建议给<app-root> 加上⼀个唯⼀的 id，
⽐如说当前应⽤名称。src/index.html ：
- <app-root></app-root>
+ <app-root id="desk"></app-root>
src/app/appponent.ts ：
- selector: 'app-root',
+ selector: '#desk app-root',
上述⼦应⽤创建⾛不通 ⽤作参考
下述流程⽂档参考地址
结合着⼀起看
在主应⽤的⼯作完成后，我们还需要对微应⽤进⾏⼀系列的配置。⾸先，我们使⽤ single-spa-angular ⽣成⼀套配置，在命令⾏运⾏以下命令：
安装 single-spa
yarn add single-spa -S
添加 single-spa-angular
ng add single-spa-angular
npm i 安装需要的依赖
npm i @angular-builders/custom-webpack@9 -D
在⽣成 single-spa 配置后，我们需要进⾏⼀些 qiankun 的接⼊配置。我们在 Angular 微应⽤的⼊⼝⽂件 main.single-spa.ts 中，导出qiankun 主应⽤所需要的三个⽣命周期钩⼦函数，代码实现如下：
main.single-spa.ts中需要加⼊
// 微应⽤单独启动时运⾏
if(!(window as any).__POWERED_BY_QIANKUN__){
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err)=&(err));
}
完整代码实现如下：
import{ enableProdMode, NgZone }from'@angular/core';
import{ platformBrowserDynamic }from'@angular/platform-browser-dynamic';
import{ Router, NavigationStart }from'@angular/router';
import{ɵAnimationEngine as AnimationEngine }from'@angular/animations/browser';
import{ singleSpaAngular, getSingleSpaExtraProviders }from'single-spa-angular';
import{ AppModule }from'./dule';
import{ environment }from'./environments/environment';
import{ singleSpaPropsSubject }from'./single-spa/single-spa-props';
if(environment.production){
enableProdMode();
}
// 微应⽤单独启动时运⾏
if(!(window as any).__POWERED_BY_QIANKUN__){
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err)=&(err));
}
const lifecycles =singleSpaAngular({
bootstrapFunction: singleSpaProps =>{
<(singleSpaProps);
return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
},
template:"<app-root id='desk' />",
Router,
NavigationStart,
NgZone,
AnimationEngine,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = unt;
export const unmount = lifecycles.unmount;
在配置好了⼊⼝⽂件 main.single-spa.ts 后，我们还需要配置 webpack，使 main.single-spa.ts 导出的⽣命周期钩⼦函数可以被 qiankun 识别获取。
我们直接配置 fig.js 即可，代码实现如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论