How do I use it in Angular v17?

[jonasfroeller]

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. How do I even use the AppModule?
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...
         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[jonasfroeller]

https://stackoverflow.com/questions/77908266/how-do-i-use-shoelace-style-components-in-angular-v17