Angular v17集成shoelace.style组件遇NG8001错误，求解决方案

先处理app-drawer-example的错误 #

这个是你自己创建的Angular组件，并非Web Component，报错原因是Angular找不到它的定义，按以下场景对应处理：

• 如果用独立组件（Angular 14+）：在使用它的组件（比如AppComponent）装饰器的imports数组中添加该组件：

  @Component({
    // ...其他配置项
    imports: [DrawerExampleComponent], // 替换为你的组件类名
    standalone: true
  })
  export class AppComponent {}
  

• 如果用NgModule：在所属模块（比如AppModule）的declarations数组中声明该组件；若组件来自其他模块，需先导入对应模块并确保组件被导出：

  @NgModule({
    declarations: [DrawerExampleComponent], // 声明自定义组件
    // ...其他配置项
  })
  export class AppModule {}
  

再解决sl-drawer的Shoelace组件问题 #

不用那个废弃的shoelace-style-angular包，直接用官方Web Component方式集成，步骤如下：

1. 安装Shoelace：

   npm install @shoelace-style/shoelace
   

2. 注册Shoelace组件：
   在main.ts中导入样式、设置资源路径并注册sl-drawer：

   import '@shoelace-style/shoelace/dist/themes/light.css';
   import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
   
   // 设置Shoelace资源（如图标）的基础路径
   setBasePath('node_modules/@shoelace-style/shoelace/dist');
   // 注册sl-drawer组件
   SlDrawer.define();
   

3. 配置Angular支持Web Component：
   • 若用NgModule：在模块的schemas数组中添加CUSTOM_ELEMENTS_SCHEMA：

     import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
     
     @NgModule({
       // ...其他配置项
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     export class AppModule {}
     

   • 若用独立组件：在组件装饰器的schemas数组中添加：

     @Component({
       // ...其他配置项
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     export class AppComponent {}
     

4. TypeScript配置兼容：
   在tsconfig.json中确保开启以下选项，支持ES模块导入：

   {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true,
       "esModuleInterop": true
     }
   }
   

验证 #

完成以上配置后，重启Angular开发服务器，两个错误应该都会消失：

• app-drawer-example会被Angular识别为自定义组件
• sl-drawer会被识别为已注册的Web Component

内容的提问来源于stack exchange，提问作者ihaveaquestion