How to use shoelace with angular

README.md

How to use shoelace with angular

1. Install shoelace

npm i @shoelace-style/shoelace -S

2. Enable Custom Elements

Add schemas: [CUSTOM_ELEMENTS_SCHEMA] in app.module.ts

3. Make shoelace available in Assets

Add

{
  "glob": "**/*.*",
  "input": "node_modules/@shoelace-style/shoelace/cdn",
  "output": "/assets/shoelace"
}

to the assets list in angular.json

4. Add shoelace Theme and Script to Webpage

In index.html, add this to the html tag: class="sl-theme-dark"

And add the follwoing to the head:

<link rel="stylesheet" href="/assets/shoelace/themes/dark.css" />
<script type="module" src="/assets/shoelace/shoelace-autoloader.js"></script>