微前端：angular 8版本以上使用qiankun

1. 在 Angular 项目中安装 qiankun 和 single-spa-angular 包。您可以使用以下命令进行安装：

   npm install qiankun single-spa-angular --save

2. 创建一个 Angular 组件，并将其包装在 single-spa-angular 模块中。例如，以下是一个简单的组件：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: '<h1>Hello, {{name}}!</h1>'
   })
   export class AppComponent implements OnInit {
     name = 'Angular';
   
     ngOnInit() {
       console.log('AppComponent initialized');
     }
   }
   

   您可以将此组件包装在 single-spa-angular 模块中，如下所示：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}
   
   const lifecycles = singleSpaAngular({
     bootstrapFunction: () => platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule),
     template: '<app-root />',
     Router,
     NavigationStart,
   });
   export const bootstrap = lifecycles.bootstrap;
   export const mount = lifecycles.mount;
   export const unmount = lifecycles.unmount;
   

       

3. 在 main.ts 文件中，使用 registerMicroApps 方法注册您的微前端应用程序。例如，以下是一个简单的注册示例：

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { registerMicroApps, start } from 'qiankun';
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   platformBrowserDynamic()
     .bootstrapModule(AppModule)
     .catch(err => console.error(err));
   
   registerMicroApps([
     {
       name: 'app1',
       entry: '//localhost:8080',
       container: '#app-container',
       activeRule: '/app1',
     },
   ]);
   
   start();
   

   在上面的示例中，我们使用 registerMicroApps 方法注册了一个名为 app1 的微前端应用程序。该应用程序的入口 URL 是 //localhost:8080，容器选择器为 #app-container，激活规则为 /app1。  

4. 在您的微前端应用程序中，使用 single-spa-angular 模块的 platformBrowserDynamic 方法来启动 Angular 应用程序。例如，以下是一个简单的启动示例：

   import { platformBrowserDynamic } from 'single-spa-angular';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   在上面的示例中，我们使用 platformBrowserDynamic 方法启动了 Angular 应用程序。