sl-button is not a known element - Importing css library into Angular

Question

I'm simply trying to import the https://shoelace.style/ library for use within an Angular app.

I've tried both their recommended method of adding style and link elements into the index file, and I've also tried adding their NPM package and then adding the following to my angular.json

"styles": [
              "src/styles.scss",
              "node_modules/@shoelace-style/shoelace/dist/themes/base.css"
            ],
            "scripts": [
              "node_modules/@shoelace-style/shoelace/dist/shoelace.js"
            ],

However no matter what I do, whenever I try to use a particular Shoelace component such as <sl-button> I get 'sl-button' is not a known element

What do I need to do to get this working?

Answer 1

Try adding this to your app module schemas: [CUSTOM_ELEMENTS_SCHEMA]

Answer 2

Just make sure to apply the custom elements schema as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

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

You can find more about CUSTOM_ELEMENTS_SCHEMA here