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
– Chau Tran, Commented Jun 6, 2018 at 18:03
@ChauTran I tried include in scripts but it doesn`t work. I think i am missing something. — Moazzam Khan
– Moazzam Khan, Commented Jun 6, 2018 at 18:09
@PavanShukla yes, but it was a bit complicated. I will try to post it here in couple of days. — Moazzam Khan
– Moazzam Khan, Commented May 3, 2019 at 14:26
@MoazzamKhan Hi, we're facing the same issue. Can you post your solution please? — Utkarsh
– Utkarsh, Commented Oct 21, 2020 at 5:54

Vivek · Accepted Answer · 2020-01-24 11:48:38Z

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, 2020 at 11:48

Vivek

3321 silver badge13 bronze badges

answered Jun 28, 2018 at 13:47

RichardZ

3752 gold badges6 silver badges18 bronze badges

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

1 Comment

Vivek Over a year ago

it worked for me too, when placed within index.html, but it does not work for any other component (eg, app.component.html)

afiugud · Accepted Answer · 2021-03-18 07:55:48Z

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 ]
})

Steoates · Accepted Answer · 2018-06-20 14:15:14Z

0

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

answered Jun 20, 2018 at 14:15

Steoates

3,1785 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to embed an angular element inside an angular application?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related