- 在 Angular 项目中安装
qiankun
和single-spa-angular
包。您可以使用以下命令进行安装:npm install qiankun single-spa-angular --save
- 创建一个 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;
- 在
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
。 - 在您的微前端应用程序中,使用
single-spa-angular
模块的platformBrowserDynamic
方法来启动 Angular 应用程序。例如,以下是一个简单的启动示例:import { platformBrowserDynamic } from 'single-spa-angular'; platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
在上面的示例中,我们使用
platformBrowserDynamic
方法启动了 Angular 应用程序。
微前端:angular 8版本以上使用qiankun
最新推荐文章于 2023-07-31 11:04:26 发布