微前端-angular+qiankun+single-spa

君威發表於 2022-1-21 18:07:00

什么是微前端？
<h2>主应用配置</h2>
采用 Angular 作为主应用基座，接入不同的子Angular项目构建angular主应用基座
<h3>使用angular cli生成angular项目</h3>
<div class="cnblogs_code">
<pre>ng new main</pre>
</div>
<h3>在主应用中安装 qiankun</h3>
<div class="cnblogs_code">
<pre>yarn add qiankun -D</pre>
</div>
<h3>将普通的angular项目改成主应用基座</h3>
1 在layout页面添加微应用容器
<div class="cnblogs_code">
<pre><nz-content class="content">
<div id="micro-app-container"></div>
<router-outlet></router-outlet> </nz-content></pre>
</div>
2 注册微应用
<div class="cnblogs_code">
<pre>export class AppComponent implements OnInit {
CONTAINER = '#micro-app-container';
microApps = [];
constructor(private router: Router, private startSvc: StartService) { }

ngOnInit(): void {
const apps = this.startSvc.getConfig().MicroApps;
if (apps && apps.length > 0) {
 apps.forEach((entry: any) => {
 const paths = `/micro/${entry.Path}`;
 const name = entry.Name;
 const app = {
 name: name,
 entry: paths,
 container: this.CONTAINER,
 activeRule: () => {
 return this.canActive(`/${name}`);
 },
 };
 this.microApps.push(app);
 });

 registerMicroApps(this.microApps);
}
}

canActive(url: string) {
return this.router.url.startsWith(url);
}

}</pre>
</div>
3 添加微应用加载器MicroComponent，统一处理微应用资源引导，启用微应用
<div class="cnblogs_code">
<pre>export class MicroComponent implements OnInit, AfterViewInit {
CONTAINER = '#micro-app-container';
constructor(private startSvc: StartService) { }

ngOnInit(): void {
}

ngAfterViewInit(): void {
const apps = this.startSvc.getConfig().MicroApps;

if (!window.qiankunStarted && apps && apps.length > 0 && document.getElementById(this.CONTAINER)) {
 window.qiankunStarted = true;
 start({
 prefetch: 'all',
 // 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理
 excludeAssetFilter: (assetUrl: string) => {
 if (assetUrl.includes('/assets/')) {
 return true;
 }
 },
 });
}
}
}</pre>
</div>
 
4 在主应用的某个路由页面加载微应用 
注册微应用时仅需要在app-routing.ts添加相应的path即可： 
<div class="cnblogs_code">
<pre>{
 path: 'project',
 component: MicroComponent,
 children: [{ path: '**', component: EmptyComponent }],
 },</pre>
</div>
配置开发环境proxy 在开发环境中，主应用和微应用分别运行在两个不同的进程（网站）中。调试时应在proxy.conf.js 配置代理 
<div class="ne-card-container">
<div class="ne-code ne-codeblock ne-code-viewer ne-codeblock-height-limit" data-codeblock-mode="json">
<div class="ne-embed-nav" data-testid="ne-embed-nav">
<div class="cnblogs_code">
<pre>{
context: ['/micro/project'],
target: 'http://localhost:4200', //微应用地址
secure: false,
},</pre>
</div>
 
<h2>微应用配置</h2>
</div>
<div class="ne-embed-nav" data-testid="ne-embed-nav"> 参考 angular微应用 </div>
<div class="ne-embed-nav" data-testid="ne-embed-nav">
<h3>1 使用angular cli生成angular项目</h3>
<div class="cnblogs_code">
<pre>ng new micro</pre>
</div>
<h3>2 在微应用中安装 <code class="ne-code">single-spa-angular</code> 插件来配置微应用 参考 single-spa-angular 的官网 和 angular demo </h3>
<div class="cnblogs_code">
<pre>ng add single-spa-angular</pre>
</div>
<img src="https://img2022.cnblogs.com/blog/1374003/202201/1374003-20220121163833919-2039675626.png">
angular.json： builder改成了自定义Webpack构建器 "builder": "@angular-builders/custom-webpack:browser"；主文件入口改成了<code class="ne-code">main.single-spa.ts</code>。
</div>
tsconfig.app.json：解决 <code>zone.js</code> 的问题：1在父应用引入 <code>zone.js</code>，需要在 <code>import qiankun</code> 之前引入。2将微应用的 <code>src/polyfills.ts</code> 里面的引入 <code>zone.js</code> 代码删掉。
新增<code class="ne-code">extra-webpack.config.js</code>，主要作用是允许开发环境跨域和 <code class="ne-code">umd</code> 打包，让主应用能正确识别微应用暴露出来的一些信息。
新增的main.single-spa.ts，导出 <code class="ne-code">bootstrap</code>、<code class="ne-code">mount</code>、<code class="ne-code">unmount</code> 三个生命周期钩子，以供主应用在适当的时机调用。
<div class="ne-embed-nav" data-testid="ne-embed-nav">
新增emptyRouteComponet，为应用间跳转做过度。asset-url.ts，动态加载子应用内assets时，能正确引入assets资源。
 
<h3>3 修改angular.json</h3>
<div class="cnblogs_code">
<pre>"architect": {
 "build": {
 "builder": "@angular-builders/custom-webpack:browser",
 "options": {
 "baseHref": "/micro/project/",
 "deployUrl": "/micro/project/",
 "outputPath": "wwwroot/micro/project",
 "index": "src/index.html",
 "main": "src/main.single-spa.ts",
 "polyfills": "src/polyfills.ts",
 "tsConfig": "tsconfig.app.json",
 "aot": true,
 "assets": [
 "src/favicon.ico",
 "src/assets"
 ],
 "styles": [
 "src/styles.less"
 ],
 "scripts": [],
 "customWebpackConfig": {
 "path": "extra-webpack.config.js",
 "libraryName": "micro",
 "libraryTarget": "umd"
 }
 }, ... } ... }</pre>
</div>
 
4和5不需要，也可以
<h3>4 修改public-path</h3>
<div class="lake-content">
在入口文件main.micro.ts修改__webpack_public_path__ 
<div class="cnblogs_code">
<pre>__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + 'project/'</pre>
</div>
<div class="ne-quote">
需在typing.d.ts文件声明
<div class="cnblogs_code">
<pre>declare var __webpack_public_path__;

interface Window {
__POWERED_BY_QIANKUN__: any;
__INJECTED_PUBLIC_PATH_BY_QIANKUN__: any;
}</pre>
</div>
</div>
</div>
<h3>5 设置APP_BASE_HREF</h3>
<div class="lake-content">
<div class="ne-quote">
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
</div>
为使微应用能够正确接入基座，应在root.module.ts中设置<code class="ne-code">APP_BASE_HREF</code> 。  
<div class="cnblogs_code">
<pre>providers: [
{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/' : '/micro/' },
],</pre>
</div>
<h3> </h3>
<h3>6 路由配置</h3>
<div class="lake-content">
业务相关路由初始化时，第一级路由的path应当以微应用编码命名，并在children里追加下级路由：
<div class="lake-content">EmptyRouteComponent，为应用间跳转做过度，解决 cannot match url 的报错问题</div>
</div>
<div class="cnblogs_code">
<pre>const routes: Routes = [
{
path: 'project',
// canActivateChild: ,
 children: [
 { path: '', redirectTo: 'week', pathMatch: 'full' },</pre>
<div>
<div>        { path: 'apply', component: ApplyComponent },</div>
<div>        { path: 'statistics', component: StatisticsComponent },</div>
<div>        { path: 'setting', component: SettingComponent },</div>
</div>
<pre> { path: '**', redirectTo: '/404' },
],
},
{ path: '**', component: EmptyRouteComponent },
];

@NgModule({
imports: ,
exports: ,
})</pre>
</div>
 
</div>
<h3>7 差异化app-root</h3>
为了防止主应用或其他微应用也为 angular 时，<app-root></app-root> 会冲突的问题，需要为<app-root> 加上唯一的 id，并以当前应用的业务模块编码命名。
src/index.html ：
<div class="cnblogs_code">
<pre>- <app-root></app-root>
+ <app-root id="project"></app-root></pre>
</div>
src/app/root.component.ts ：
<div class="ne-card-container">
<div class="ne-code ne-codeblock ne-code-viewer ne-codeblock-height-limit" data-codeblock-mode="typescript">
<div class="ne-codeblock-inner">
<div class="CodeMirror cm-s-default">
<div class="CodeMirror-scroll">
<div class="CodeMirror-sizer">
<div class="CodeMirror-lines">
<div class="CodeMirror-code">
<div class="cnblogs_code">
<pre>- selector: 'app-root',
+ selector: '#project app-root',</pre>
</div>
 
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 
 
</div>
</div>
</div> 
来源：https://www.cnblogs.com/tingying/p/15829957.html

頁: [1]

琼殿技术论坛's Archiver

微前端-angular+qiankun+single-spa