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...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 usingCUSTOM_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
index.html
stackblitz