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.
