React应用中无法访问Angular自定义元素的问题求助

核心问题排查 #

你遇到的错误主要来自两个方面：

• 违反Web Components规范：自定义元素命名不符合要求
• React + TypeScript类型不兼容：无法识别自定义标签

分步解决 #

1. 修正Angular自定义元素命名（必须） #

Web Components规范要求自定义元素名称必须包含至少一个短横线，不能使用纯驼峰或无分隔符的名称。修改Angular的AppModule代码：

import { inject, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  entryComponents: [AppComponent],
})
export class AppModule {
  constructor(private _injector: Injector) {
    const element = createCustomElement(AppComponent, {
      injector: this._injector,
    });
    // 改为符合规范的短横线命名
    customElements.define('news-widget', element);
  }

  ngDoBootstrap() {}
}

2. 解决React TypeScript类型报错 #

在React项目的src目录下创建custom-elements.d.ts文件，添加自定义元素的类型声明：

declare namespace JSX {
  interface IntrinsicElements {
    'news-widget': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
  }
}

该文件会被TypeScript自动识别，消除<news-widget>标签的类型错误。

3. 规范自定义元素脚本加载 #

不要同时在index.html和App.tsx中重复导入脚本，二选一即可：

方式一：通过index.html加载

确保脚本路径正确，建议使用相对根目录的路径（避免层级跳转出错），添加defer确保脚本在DOM解析完成后加载：

<script src="/Angular/news-custom-element/news-dist/news-custom-element.js" defer></script>

方式二：在App.tsx中导入

直接导入打包后的脚本，确保webpack能正确解析路径：

import './App.css';
import UploadButton from './Component/UploadButton';
import { GlobalContextProvider } from './Context/globalContext';
import MessageComponent from './Shared/Alert';
// 导入自定义元素脚本
import '../../../../Angular/news-custom-element/news-dist/news-custom-element';

function App() {
  return (
    <GlobalContextProvider>
      {/* 使用修正后的短横线标签名 */}
      <news-widget></news-widget>
      <UploadButton />
      <MessageComponent />
    </GlobalContextProvider>
  );
}

export default App;

4. 确保Angular自定义元素正确构建 #

重新构建Angular项目，生成可用的自定义元素包：

1. 确认已安装@angular/elements：npm install @angular/elements --save
2. 执行生产构建（关闭哈希方便合并脚本）：

ng build --prod --output-hashing none

3. （可选）将构建生成的runtime.js、polyfills.js、main.js合并为单个news-custom-element.js，方便引用。

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