基于qiankun搭建angular15微前端项目入门实践

以下是一个基于Angular 15和qiankun搭建微前端的基本示例。

首先，确保你已经安装了Angular CLI，并创建了一个Angular工程。

1. 安装qiankun:

npm install qiankun --save

2. 在你的Angular项目中创建一个微应用主入口文件（例如 src/micro-app/main.ts）:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
// 导入qiankun必要的symbol和类型
import { registerMicroApps, start } from 'qiankun';
 
if (environment.production) {
  enableProdMode();
}
 
// 注册微应用
registerMicroApps([
  {
    name: 'your-micro-app', // 微应用名称
    entry: '//localhost:4201', // 微应用的入口地址
    container: '#micro-app', // 微应用挂载的DOM节点
    activeRule: '/your-micro-app', // 微应用的激活规则
  },
  // 可以注册更多微应用
]);
 
// 启动qiankun
start();
 
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(ref => {
    // 当微应用加载完毕时...
  })
  .catch(err => console.error(err));

3. 在你的Angular模板中添加微应用的容器（例如 src/app/app.component.html）:

<div style="height: 400px;">
  <div id="micro-app"></div>
</div>

4. 确保微应用的web服务器配置允许跨源资源共享（CORS）。
5. 微应用的index.html中需要有一个挂载点（例如一个带有特定id的div元素）:

<div id="micro-app"></div>

6. 微应用的入口js文件（例如 micro-app/src/main.ts）需要导出一个生命周期钩子函数：

import { bootstrap } from 'aurelia-bootstrapper';
 
export function render() {
  // 渲染微应用的逻辑
  return bootstrap(customContainerSelector);
}

以上是一个基本的入门示例。在实际应用中，你可能需要处理更多的生命周期钩子函数，比如destroy、update等，并且需要确保微应用的样式不会影响到主应用，可能还需要处理微应用的路由和状态管理。