Using Angular 6 web components

angular elements web components
angular web components library
what is dom in angular 7
creating reusable components in angular 6
web components tutorial
angular component
angular standalone component
angular 8 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

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.

Angular elements overview, With the newest Angular CLI and the new addition to Angular family — the Angular Elements package it's extremely easy to create native custom elements. With the release of Angular 6 the new Angular Elements functionality is now fully available. By using Angular Elements you can package Angular components as custom elements, a web standard for

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.

[Tutorial] How to create Custom Angular Elements?, How to build web components using popular front-end framework angular. Angular CLI (version 6 or higher); NPM (version 5 or higher); Node (version 10.8.​0  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.

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

Building Custom Elements / Web Components with Angular 6, The library also includes an ES5 compatibility script in case you transpile your app into ES5. $ npm install --save-dev @webcomponents/webcomponentsjs. Copy  Using Web Components With Angular. Angular is an application framework favored by many in the JavaScript community. Angular provides a library for building encapsulated components, dependency injection, a templating language with data binding, an application router built on observables, and a command line interface that lowers the barrier to entry.

Web Components with angular - Islam Muhammad, Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a  With the release of Angular 6 the new Angular Elements functionality is now fully available. By using Angular Elements you can package Angular components as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. The custom elements standard is currently supported by browsers like Chrome, Opera, and Safari.

How to use Web Components in Angular, Now, if you're using the same Angular version as I am, in the project directory, run npm install --save rxjs@6.0.0 to install the compatible version  Web Components in Angular. We could use a Web Component in an Angular form without issue, but because a Web Component is not an Angular form component it does not have the helpful APIs Angular Forms provides such as custom validation and form state management. Using web components in Angular overall is quite straightforward.

Web Components using Angular, 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22 We're now able to start using our web components with our Angular application and  Angular Elements is one of the best feature released in Angular 6. It allows us to create a Web Components (Custom Elements) using an Angular. Angular elements are ordinary Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way

Comments
  • 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.
  • @CSantos did you find any solution to this??