qiankun 微前端创建angular17主应用

创建 qiankun 主应用

以 angular 17 为例

1. 下载 angular脚手架

npm install -g @angular/cli

2. 新建应用

ng new qiankun-main

3. 下载qiankun 依赖

npm i qiankun 

4. 注册子应用

// AppComponent.ts
export class AppComponent implements OnInit {
  ngOnInit(): void {
    registerMicroApps([
      {
        name: 'app-vue3-vite',
        entry: 'http://localhost:3002/',
        container: '#container',
        activeRule: '/app-vue3-vite',
      },
      {
        name: 'app-ng-17',
        entry: 'http://localhost:3003/',
        container: '#container',
        activeRule: '/app-ng17',
      },
      {
        name: 'app-react-18',
        entry: 'http://localhost:3000/',
        container: '#container',
        activeRule: '/app-react-18',
      }
    ]);
    start();
  }

  /**
   * 子应用准备安装
   * @param app
   * @version 1.0.0
   */
  beforeLoad(app: any) {
    return Promise.resolve();
  }

  /**
   * 子应用安装前
   * @param app
   * @version 1.0.0
   */
  beforeMount(app: any) {
    return Promise.resolve();
  }

  /**
   * 子应用安装后
   * @param app
   * @version 1.0.0
   */
  afterMount(app: any) {
    return Promise.resolve();
  }

  /**
   * 子应用准备卸载
   * @param app
   * @version 1.0.0
   */
  beforeUnmount(app: any) {
    return Promise.resolve();
  }

  /**
   * 子应用卸载后
   * @param app
   * @version 1.0.0
   */
  afterUnmount(app: any) {
    return Promise.resolve();
  }

}

5. 配置通配符路由

// app.routes.ts
export const routes: Routes = [
  { path: '**', component: EmptyRouteComponent }
];

6. 新建一个空的组件

import { Component } from '@angular/core';

/**
 * 乾坤容器类
 * @author chen yu
 * @version 1.0.0
 */
@Component({
  selector: 'main-empty-route',
  template: '',
  standalone: true
})
export class EmptyRouteComponent {
}

7. 修改app.component.html

<router-outlet />
<div id="container" class="inner-content"></div>

8. 启动项目

npm run start

9. 创建子应用
   
   vue3+vite子应用
10. 完整实例

https://github.com/waliu/qiankun-template-example

10. 加入交流群
    
    
    qq 群763367896