如何将带路由的完整Angular 16应用转为可嵌入WebComponent？

核心思路 #

不要单独转换某个子组件，而是把包含<router-outlet>的AppComponent整个转成WebComponent。这样整个应用的路由逻辑、多组件、服务都会被封装在这个自定义元素内部，不会和宿主应用产生冲突。

具体实现步骤 #

1. 修改AppModule配置

把AppComponent转为自定义元素，同时保留所有路由、组件、服务的导入和声明：

import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HttpClientModule } from "@angular/common/http";
import { BrowserModule } from '@angular/platform-browser';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DetailComponent } from './detail/detail.component';
import { DetailService } from './detail/detail.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DetailComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    DetailService,
    // 使用Hash路由避免与宿主应用路由冲突
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  // 不需要bootstrap任何组件，因为要转为自定义元素
  bootstrap: []
})
export class AppModule {
  constructor(private injector: Injector) {
    // 将AppComponent转为自定义元素
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-angular-app', appElement);
  }

  ngDoBootstrap() {}
}

2. 调整路由配置

确保路由模块使用相对路径，并且配合Hash路由策略：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailComponent } from './detail/detail.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 配置组件样式隔离（可选但推荐）

为AppComponent开启Shadow DOM，确保应用样式不会污染宿主应用：

// app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // 开启Shadow DOM隔离样式
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent { }

4. 打包与嵌入

• 使用Angular CLI打包应用：

  ng build --prod --output-hashing none
  

  （--output-hashing none可以简化打包后的文件名，方便引入）

• 在宿主应用的HTML中引入打包后的脚本并使用自定义元素：

  <body>
    <!-- 嵌入整个Angular应用的WebComponent -->
    <my-angular-app></my-angular-app>
    
    <!-- 引入打包后的JS文件（根据实际打包结果调整文件名） -->
    <script src="runtime.js"></script>
    <script src="polyfills.js"></script>
    <script src="main.js"></script>
  </body>
  

关键注意事项 #

• 路由冲突解决：必须使用HashLocationStrategy，因为WebComponent内部的路由如果使用PathLocationStrategy，会修改宿主应用的URL路径，导致冲突。
• 服务共享：WebComponent内部的服务是独立的，不会和宿主应用的服务共享，确保了隔离性。
• 样式隔离：开启Shadow DOM后，Angular组件的样式只会作用于WebComponent内部，不会影响宿主应用。

推荐资源 #

• Angular官方文档中关于Angular Elements的章节，详细说明了自定义元素的创建与集成。
• Angular官方文档中路由与自定义元素结合的相关内容，讲解了路由隔离的最佳实践。

内容的提问来源于stack exchange，提问作者Dust_In_The_Wind