Using Web Components with Angular | Task

Ole Ersoy
Apr - 24  -  1 min

Scenario

We want to use the Firefly Semantics fs-link-preview web component

Approach

Within the project add the CUSTOM_ELEMENTS_SCHEMA to app.module.ts.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You may also want to add web components polyfills CDN script to the head element of index.html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js" integrity="sha512-I8ku8+abM93SgC4hbSAB6TERERGi/STakRCIQRrkgwyOMw2IHbgx+5boDeUTjzsXu55aTSBfyrI/toVBM38SzA==" crossorigin="anonymous"></script>