Angular6 export custom component using Angular Element: The selector "app-root" did not match any elements

Question

I created a custom component and export it as a JavaScript file, following the instruction in this link (https://angularfirebase.com/lessons/angular-elements-quick-start-guide/). I included the script file into an html file.

My problem is when I open the html in the browser (Chrome), I see an error saying "The selector "app-root" did not match any elements". But when I delete bootstrap: [AppComponent], in app.module.ts file, the problem will disappear.

app.module.ts code: enter image description here

app.component.ts enter image description here

index.html code

<body>
<app-root></app-root>
<custom-visualization></custom-visualization>
</body>

my demo html code:

<custom-visualization></custom-visualization>
<script src="./exportedCustoVmisualization.js"></script>

Environment:

Angular version: X.Y.Z
Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

Dhruv Shah · Accepted Answer · 2018-08-21 12:19:59Z

3

bootstrap: [AppComponent] command bootstraps the application with <app-root> template. But since in the constructor you are trying to register a custom component with <app-vote> tag, there is a mismatch.

If you are using customElements, you dont need to have the bootstrap: [AppComponent] part in your @NgModule declaration. Refer to the following link for more clearer understanding: https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b

answered Aug 21, 2018 at 12:19

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Angular6 export custom component using Angular Element: The selector "app-root" did not match any elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related