Angular自定义元素嵌入WordPress时出现NullInjectorError报错求助

问题根源 #

你通过bootstrapApplication启动独立组件后获取注入器来创建自定义元素的方式存在问题——bootstrapApplication返回的注入器并不包含自定义元素创建所需的_ComponentFactoryResolver提供者，这直接导致了控制台的NullInjectorError报错。

正确解决方案 #

无需通过bootstrapApplication启动组件，直接为独立组件创建环境注入器，再用它生成自定义元素。修改你的main.ts代码如下：

import 'zone.js'; // Angular必需的依赖
import '@webcomponents/custom-elements'; // 自定义元素兼容垫片（按需使用）
import { createCustomElement } from '@angular/elements';
import { MyEmbeddedComponent } from './app/my-embedded/my-embedded.component';
import { createEnvironmentInjector, ApplicationConfig } from '@angular/core';
import { provideZoneChangeDetection } from '@angular/core';

// 定义独立组件的应用配置
const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};

// 创建环境注入器
const injector = createEnvironmentInjector(appConfig.providers);

// 将独立组件转换为自定义元素并注册
const MyEmbeddedElement = createCustomElement(MyEmbeddedComponent, { injector });
customElements.define('my-embedded-element', MyEmbeddedElement);

补充说明 #

• 若自定义元素需要依赖其他Angular服务，只需将对应服务添加到appConfig.providers数组中即可。
• 空的AppComponent可以直接删除，因为我们不再需要启动完整的Angular根应用。
• 构建命令保持原有配置不变：ng build --configuration=production --optimization=false

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