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 -

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

2. Imported angular-element script in app.component.html and also embedded fancy-button in app.component.html (root component running in angular application)

Thanks

Answer 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.

Answer 2

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

1. 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"
                    ],
                    ...
                 },
             ...
         },
         ...
     }

2. In your polyfills files include import 'zone.js/dist/zone'; // Included with Angular CLI. at the end of the file.

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