CODEWITHSUNDEEP
angularelementangular6angular-elements
csantos
csantos

Reputation: 187

Using Angular 6 web components

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

Upvotes: 1

Views: 1933

Answers (4)

Shirantha Madusanka
Shirantha Madusanka

Reputation: 1695

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);

Read more information from here.

Upvotes: 0

J.P.
J.P.

Reputation: 5745

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.

Upvotes: 5

hamza
hamza

Reputation: 139

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

Upvotes: 0

Neckster
Neckster

Reputation: 96

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.

Upvotes: 0

Related Questions