angular web-component custom-element ng-modules shoelace

How do I use shoelace.style components in Angular v17?

I'm new to Angular, and this is my first project, so maybe the process is obvious. I followed the steps outlined at Shoelace Angular Integration, but I couldn't get it running. I noticed there's also a package available at npmjs.com, but I don't want to depend on it because it seems like it might be abandoned and for v14.

How do I even use the AppModule that I created following the tutorial? I also read similar issues, but I couldn't fix it.

I tried adding just schemas: [CUSTOM_ELEMENTS_SCHEMA] to my component, but I encountered the same error, which is really confusing.

How do I import it without getting into dependency hell?

Here's what I get:

X [ERROR] NG8001: 'app-drawer-example' is not a known element:
1. If 'app-drawer-example' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-drawer-example' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:5:0:
      5 │ <app-drawer-example></app-drawer-example>
        ╵ ~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:11:15:
      11 │   templateUrl: './app.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'sl-drawer' is not a known element:
1. If 'sl-drawer' is an Angular component, then verify that it is part of this module.
2. If 'sl-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler] 

    src/app/app.component.ts:21:79:
      21 │ ...r</button><sl-drawer #drawer label="Drawer" class="drawer-focus...
         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Solution

Here is a working example on stackblitz not by me, please note it works only for 2.3.0, I would recommend you try other library since, you are using CUSTOM_ELEMENTS_SCHEMA this will block many angular validations during compilation, instead go for a stable package with angular support, please find below working example!

main.ts

import 'zone.js';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import '@shoelace-style/shoelace/dist/shoelace.js';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <div>
      <sl-tree selection="multiple">
        <sl-tree-item expanded [selected]="treeItem.selected" (click)="treeItem.selected = true">
            <sl-icon [name]="treeItem.iconId"></sl-icon>
            {{treeItem.label}}
            <sl-button size="small" (click)="onAddToContainer(treeItem, $event)">
                <sl-icon name="plus"></sl-icon> button
            </sl-button>

            <sl-tree-item>test</sl-tree-item>
        </sl-tree-item>
      </sl-tree>
    </div>
  `,
})
export class App {
  name = 'Angular';
  treeItem = {
    selected: false,
    label: 'test',
    iconId: 'github',
  };

  onAddToContainer(treeItem, e) {
    e.stopPropagation();
    alert(treeItem);
  }
}

bootstrapApplication(App);

index.html

<html>
  <head>
    <title>My app</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css"
    />
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

stackblitz