如何在Angular项目中使用发布到NPM的React组件并解决导入报错

你遇到的报错本质是用法完全错误：

1. Angular的@NgModule装饰器里的imports数组仅接受三类合法值：Angular模块类、ModuleWithProviders对象、符合要求的模块数组，你直接导入的SayHello是React函数组件，类型完全不匹配，对应报错翻译为：类型({ name }: { name: string; }) => Element 不能赋值给 any[] | Type<any> | ModuleWithProviders<{}>类型。
2. React和Angular是两套独立的前端框架，渲染逻辑、运行时、组件规范完全不兼容，不存在“安装npm包后直接把React组件塞进Angular模块就能用”的可能，必须做桥接包装。

• 第一步：在Angular项目中安装React运行时依赖，你的React组件运行需要React环境支撑，Angular默认不自带该依赖

npm i react react-dom
npm i -D @types/react @types/react-dom

• 第二步：创建Angular包装组件作为桥接层，用Angular组件的生命周期管理React组件的挂载、更新、卸载逻辑，示例包装组件代码如下：

// say-hello-wrapper.component.ts
import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
import * as React from 'react';
import { createRoot, Root } from 'react-dom/client';
import SayHello from 'reactcustomplugin';

@Component({
  selector: 'app-say-hello',
  template: '<div #reactHost></div>',
  standalone: true
})
export class SayHelloWrapperComponent implements OnInit, OnChanges, OnDestroy {
  @ViewChild('reactHost', { static: true }) hostRef!: ElementRef<HTMLDivElement>;
  @Input() name!: string;
  private reactRoot!: Root;

  ngOnInit() {
    this.reactRoot = createRoot(this.hostRef.nativeElement);
    this.render();
  }

  ngOnChanges() {
    if (this.reactRoot) this.render();
  }

  ngOnDestroy() {
    this.reactRoot.unmount();
  }

  private render() {
    this.reactRoot.render(<SayHello name={this.name} />);
  }
}

• 第三步：在Angular模块中导入你自己编写的上述Angular包装组件，而非原始React组件，示例模块配置：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 导入Angular包装组件
import { SayHelloWrapperComponent } from './say-hello-wrapper.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SayHelloWrapperComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 第四步：在Angular模板中直接使用包装后的组件即可，参数传递和普通Angular组件一致：

<app-say-hello [name]="'访客'"></app-say-hello>

注意：不要尝试修改React组件源码强行适配Angular，包装层是跨框架复用组件的通用方案，不会破坏原有React组件的逻辑。

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