1

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.

3
  • You need to add the AngularElementComponent inside the declarations array of the @ngModule object Commented May 19, 2022 at 15:39
  • You were right. In addition this error happens becouse angular didnt understand what element have to be shown. Thats i also need to add my element to bootstrap array inside ngModule decorator. At least now component works in my angular project. Now i have next problem while using my builded js file i got an error The selector "app-angular-element" did not match any elements (I gave new selector to my component inside define(now name equal to selector inside component decorator). Anyway thanks for helping Commented May 20, 2022 at 8:00
  • I guess its becouse i use bootstrap array. I read somewhere if I use ngDoBootstrap method i have to clear bootstrap array inside decorator. hmm Commented May 20, 2022 at 8:11

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.