NullInjector创建简单自定义元素（@angular/元素）时出错。没有任何提供商，服务

Question

最近我一直在学习Angular和@angular/元素。我对创建可以在任何html中使用的自定义元素感到好奇。我的目标是创建简单的自定义元素，只有1个组件没有提供者，服务（我的第一个自定义元素）

但我有一个错误

    main.ts:12 NullInjectorError: R3InjectorError(AppModule)[ComponentFactoryResolver$1 -> ComponentFactoryResolver$1 -> ComponentFactoryResolver$1]: 
      NullInjectorError: No provider for ComponentFactoryResolver$1!

    //app.module.ts
    import { BrowserModule } from "@angular/platform-browser";
    import { NgModule, DoBootstrap, Injector } from "@angular/core";
    import { createCustomElement } from "@angular/elements";
    
    import { AppComponent } from "./app.component";
    import { AngularElementComponent } from './angular-element/angular-element.component';
    
    @NgModule({
        declarations: [AppComponent],
        imports: [BrowserModule],
        entryComponents: [AngularElementComponent],
        providers: []
    })
    export class AppModule implements DoBootstrap {
        constructor(private injector: Injector) {
        }
        ngDoBootstrap(): void {
            const el = createCustomElement(AngularElementComponent, { injector: this.injector });
            customElements.define('angular-element-component', el);
        }
    }

    //my component
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-angular-element',
      templateUrl: './angular-element.component.html',
      styleUrls: ['./angular-element.component.scss']
    })
    export class AngularElementComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

这就是我的观点。对我来说，错误意味着我必须在导入createCustomElement、DoBootstrap和Injector之后定义一些注入依赖项或提供程序。我在谷歌上搜索了这个错误，发现了一些例子，解释了如果我有一些服务，但没有服务提供商，可能会出现错误。此外，我发现了一些类似的视频https://www.youtube.com/watch?v=lAlOryf1-吴：这是关于调试这样的错误。它告诉我们，我有一个名为ComponentFactoryResolver的类，我已经注入了另一个类，但我没有提供程序或@Injectable装饰器。但问题是，除了我的组件类之外，我并没有创建任何类。（由命令ng g c生成）。

更新：

我也尝试了本指南 https://medium.com/@lavanya.kakimallaiah/creating-a-custom-element-in-angular-aa2a794fd041 并犯了同样的错误

我不知道，也许是因为我在做新的有角度的版本。我将尝试搜索更新版本的指南。

更新：

我得出的结论是：如果我将组件添加到模块装饰器内的引导数组中，错误就会消失。但是，在构建js文件并在简单html中使用它之后，我遇到了另一个错误

The selector "app-angular-element" did not match any elements

抱歉，我的英语很差。希望有人能指出错误在哪里。

Answer 1

好了伙计们。我已经修复了它(或只是找到了它的工作方式)。问题是我在项目中有2个组件:AppComponent和AngularElementComponent。仅注册了一个AngularElementComponent。我找到了另一个指南，解释了如何创建简单的一个项目定制组件https://www.youtube.com/watch?v=K41nS8-m6oM

总之，我需要学习如何在一个项目中创建和管理自定义元素。在实际项目中，我打赌有多个组件相互依赖，所以我只需要知道如何处理这些依赖关系和组件的生命周期，以便创建复杂的自定义组件。

因为现在对我来说已经足够了。