Using Angular 6 web components

Question

I have the following problem. I have an application constructed using Angular 6 with routing system. I want to create a web component that will contain this application and be able to use it as part on a different web application. I have followed this tutorial and I have modify it based on my needs: https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

The result is that nothing renders on the screen and now error exist in the browser Error: The selector "app-root" did not match any elements.

On the browser source files I can confirm that the js file that contains my web component is loaded successfully.

Here is what I have:

In app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    VideoRoomComponent,
    DashboardComponent,
    StreamComponent,
    DialogNicknameComponent,
    ChatComponent,
    DialogExtensionComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatDialogModule,
    MatTooltipModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  entryComponents: [
    AppComponent,
    DialogNicknameComponent,
    DialogExtensionComponent,
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('myElement', el);
  }
}

Here, my index.html to test the custom element

   <!DOCTYPE html>
<html>

<head>

  <title>My webpage!</title>
  <script>
    var global = global || window;
  </script>
  <script type="text/javascript" src="myElement.js"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <myElement></myElement>    
</body>

</html>

Any suggestions on this problem?

Thanks in advance

Can you reproduce this on StackBlitz? I've tried, but I'm not getting the specific error that app-root didn't match any elements. — J.P.
– J.P., Commented Jun 12, 2018 at 7:51

Trenton McKinney · Accepted Answer · 2019-09-27 04:09:31Z

5

Try using <my-element> instead of <myElement>. Also, adjust your customElements.define call to customElements.define('my-element', el);. If I'm not mistaken, to separate custom elements from native browser elements, every custom element is required to have at least one dash. HTML is case-insensitive.

edited Sep 27, 2019 at 4:09

Trenton McKinney

63.2k41 gold badges170 silver badges213 bronze badges

answered Jun 12, 2018 at 7:45

J.P.

5,7624 gold badges27 silver badges40 bronze badges

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

Comments

Neckster · Accepted Answer · 2018-06-24 20:38:56Z

It should be something like this in your main.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';

import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';

@NgModule({
   entryComponents: [
      AppComponent
   ],
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: []
})
export class AppModule {
   constructor(private injector: Injector) {
      const firstComponent = createCustomElement(AppComponent, { injector });
      customElements.define('name-of-your-component', firstComponent);
   }

   ngDoBootstrap() {}
}

So basically you have to declare the custom element before bootstrapping your component.

Checkout this article for step by step guide.

hamza · Accepted Answer · 2019-09-26 20:16:09Z

0

you should comment youre bootstrap:[AppComponent] line before building, so it won't be bootstrapt with youre custome elements.

answered Sep 26, 2019 at 20:16

hamza

1391 silver badge5 bronze badges

Comments

Shirantha Madusanka · Accepted Answer · 2021-01-02 13:29:51Z

0

HTML should be like this.

<!DOCTYPE html>
<html>
    <head>
        <title>My webpage!</title>
        <script>var global = global || window;</script>
        <script type="text/javascript" src="myElement.js"></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <my-element></my-element>    
    </body>
</html>

And update app.module.ts with this.

customElements.define('my-element', el);

Collectives™ on Stack Overflow

Using Angular 6 web components

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related