How to embed an angular element inside an angular application?

Question

I have an angular element, goes with custom tagname - fancy-button. How can I embed fancy-button in a angular application?

I have tried the following ways, but none of them worked -

Imported angular-element script in index.html/angular.json[scripts] and embedded fancy-button in app.component.html (root component running in angular application)
Imported angular-element script in app.component.html and also embedded fancy-button in app.component.html (root component running in angular application)

Thanks

How about putting the angular-element script in `scripts` in `angular.json`? — Chau Tran, Jun 06 '18 at 18:03
@ChauTran I tried include in scripts but it doesn`t work. I think i am missing something. — Moazzam Khan, Jun 06 '18 at 18:09
@PavanShukla yes, but it was a bit complicated. I will try to post it here in couple of days. — Moazzam Khan, May 03 '19 at 14:26
@MoazzamKhan Hi, we're facing the same issue. Can you post your solution please? — Utkarsh, Oct 21 '20 at 05:54

score 1 · Answer 1 · edited Jan 24 '20 at 11:48

1

To index.html, I added:

<script type="text/javascript" src="assets/cappapproot.js"></script>

(cappapproot.js is the name of my Angular Element js)

This caused an Uncaught Error: Zone already loaded. To resolve this error, in pollyfills.ts I commented out the line:

import 'zone.js/dist/zone';  // Included with Angular CLI.

edited Jan 24 '20 at 11:48

Vivek

322
1
13

answered Jun 28 '18 at 13:47

RichardZ

345
2
6
18

it worked for me too, when placed within index.html, but it does not work for any other component (eg, app.component.html) – Vivek Jan 24 '20 at 08:46

score 1 · Answer 2 · answered Mar 18 '21 at 07:55

in the end, I managed to implement the custom element in my application. You should do the next steps:

In your angular.json add the script file in your selected project:

    ...,
    "projects": {
        "my-awesome-project": {
        ...,
        "architect": {
            "build": {
                "options":{
                    ...,
                    "scripts": [
                        ...,
                        "[path to your awesome Element js]/[awesome-element].js"
                    ],
                    ...
                 },
             ...
         },
         ...
     }

In your polyfills files include import 'zone.js/dist/zone'; // Included with Angular CLI. at the end of the file.
In the module you want to include your Angular element you must add the CUSTOM_ELEMENTS_SCHEMA in the schemas parameter of the decorator:

@NgModule({
  declarations: [...],
  imports: [
    CommonModule,
    ...
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

score 0 · Answer 3 · answered Jun 20 '18 at 14:15

0

Are you absolutely sure your using the correct element name? Can you post your component + usage?

answered Jun 20 '18 at 14:15

Steoates

3,058
5
27
43

How to embed an angular element inside an angular application?

3 Answers3