NullInjectorError while creating simple custom element (@angular/elements). without any providers, services

Question

Lately I have been learning Angular and @angular/elements. I was curious about creating custom element that i can use in any html. My goal is to create simple custom element just with 1 component without providers, services (my first custom element)

But im getting an error

    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 {
      }
    
    }

So my point of view. For me error means that I have to define some injection dependencies or providers after I import createCustomElement, DoBootstrap, Injector. I googled this error and I found some examples that explains that error can appear if I have some services and no providers for them. Also i found some videos like that https://www.youtube.com/watch?v=lAlOryf1-WU Its about debugging errors like that. It tells that I have some class named ComponentFactoryResolver that I have injected in another class, but i dont have provider or @Injectable decorator. But problem is that I didnt create any classes besides my component class.(generated by command ng g c).

UPDATE:

I tried this guide as well https://medium.com/@lavanya.kakimallaiah/creating-a-custom-element-in-angular-aa2a794fd041 And mistake the same

I dont know, maybe its becouse im doing on newer angular version. I'll try to search guide for newer versions.

UPDATE:

What i fugured out: Error disappears if i add my component to bootstrap array inside module decorator. But after building my js file and using it in simple html, i have another error

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

Sorry for my poor english. Hope some can point out where mistake is.

Answer 1

Ok guys! I've fixed it (or just found the way it works) problem is I have 2 components in project: AppComponent and AngularElementComponent. Only one AngularElementComponent is registered. I found another guide that explains how to create simple one project custom component https://www.youtube.com/watch?v=K41nS8-m6oM

In conclusion: I need to learn how to create and manage custom element(or elements) in one project. In real projects I bet there is multiple components that depends on each other, so i just need to know how work with this dependencies and life cycles of components in order to created complex custom component.

For right now its enough for me.

Answer 2

Check your returned HTTP MIME type when you return TwiML.

https://www.twilio.com/docs/voice/twiml#twilio-understands-mime-types