Angular 18配置Angular-Slickgrid遇NullInjectorError问题求助

问题现象 #

在 Angular 18.0.0 中配置 Angular-Slickgrid 组件时，Chrome 浏览器抛出错误：

NullInjectorError: No provider for _ContainerService!

用户当前的组件代码如下：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AngularSlickgridModule,Column, GridOption } from 'angular-slickgrid';

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

问题原因 #

Angular 18 全面采用独立组件模式后，Angular-Slickgrid 的部分内部服务（如 _ContainerService）无法仅通过导入模块自动完成依赖注入，需要显式提供这些服务的提供者。

解决方案 #

在组件装饰器的 providers 数组中添加 AngularSlickgridModule.forRoot() 返回的服务提供者，修改后的代码如下：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AngularSlickgridModule, Column, GridOption } from 'angular-slickgrid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, AngularSlickgridModule],
  providers: [...AngularSlickgridModule.forRoot().providers],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

说明 #

AngularSlickgridModule.forRoot() 会生成包含该组件库所有核心服务提供者的配置对象，在独立组件的 providers 中展开这些提供者，就能让 Angular 找到并注入 _ContainerService 等所需服务，解决依赖缺失的问题。

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