Use Angular Element in app.component.html

Question

I have been playing with Angular Elements for a while. Our team is building multiple independent angular projects and convert them into Angular Elements. We also build a main shell and those angular elements will be called in the main shell.

The main shell is written by Angular. So far I found I only can embed the angular elements into index.html in main shell. However, I wonder is there a way to use the angular elements in app.component.html?

index.html in mainShell: it's working fine using app1-element here.

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
    <script src="../../elements/app1-element.js"></script>
  </head>
  <body>
    <app1-element></app1-element> 
  </body>
</html>

The angular projects structure is shown below. So how to use app1-element in app.component.html? I use the similar code there and it doesn't work. By the way, to run the main shell, I use Go Live from mainShell/src

app1
--src
----app
------app.module.ts (customElements.define('app1-element', el);)
--package.json

mainShell
--src
----app
------app.component.html (I want to use 'app1-element' here)
----index.html
--package.json

Thanks in advance!

score -1 · Answer 1 · answered Jun 14 '19 at 14:07

I figured out. To use Angular element in app.component.html, you need to import the .js file properly. There are a couple of ways to do it, you can use SystemJS, dimport, or static import by using JQuery. I my demo, I import the .js file static, plz refer to this article here

Use Angular Element in app.component.html

1 Answers1