如何在Angular独立组件中使用feather-icons？遇组件导入类型错误

错误信息翻译 #

类型“ModuleWithProviders”不能分配给类型“readonly any[] | Type”。ts(2322)
组件导入包含ModuleWithProviders类型的值，这通常是Module.forRoot()这类调用的结果。这类调用不是用来配置组件的，在独立组件的导入中无效——建议改为在应用启动时导入。

问题原因 #

独立组件的imports数组仅接受组件、指令、管道或普通NgModule类型，不支持返回ModuleWithProviders的配置方法（比如FeatherModule.pick()），这类方法是为传统模块式Angular应用设计的。

解决方案 #

将FeatherModule的配置移到应用启动阶段，组件内仅导入基础的FeatherModule：

1. 在main.ts中配置图标 #

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { FeatherModule } from 'angular-feather';
import { Camera, Heart, Github } from 'angular-feather/icons';

const icons = {
  Camera,
  Heart,
  Github,
};

bootstrapApplication(AppComponent, {
  providers: [
    ...FeatherModule.pick(icons).providers!
  ]
});

2. 修改独立组件的导入 #

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, FeatherModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

内容的提问来源于stack exchange，提问作者Sebastián Rojas