CODEWITHSUNDEEP
cssangularshoelace
jm123456
jm123456

Reputation: 635

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

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?

Upvotes: 0

Views: 486

Answers (2)

Ismail Dinar
Ismail Dinar

Reputation: 426

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

Upvotes: 1

user733421
user733421

Reputation: 497

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

Upvotes: 1

Related Questions