Angular 14升级后Material组件出现mat-select-scroll-strategy注入错误

问题根源 #

Angular 14对Angular Material的MatSelect组件依赖注入逻辑做了变更：mat-select-scroll-strategy注入令牌的提供方式在14版本中被调整，而你的自定义npm包仍使用Angular Material 13版本，导致在Angular 14环境下无法正确提供该依赖，触发NullInjectorError。

核心规则：Angular框架版本与Angular Material版本必须严格匹配，Angular 14要求配套使用Angular Material 14.x.x版本，跨版本混用必然引发兼容性问题。

解决方案 #

1. 最优方案：升级自定义npm包 #

将你的自定义包中的Angular Material依赖升级到14.x.x版本，确保其与项目的Angular 14版本完全对齐。这是彻底解决问题的方式，能避免后续出现更多跨版本兼容问题。

2. 临时 workaround（不推荐长期使用） #

如果暂时无法升级自定义包，可以手动在AppModule中提供缺失的注入令牌，使用Angular CDK的默认滚动策略：

import { NgModule } from '@angular/core';
import { InjectionToken } from '@angular/core';
import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';

// 定义匹配的注入令牌
export const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('mat-select-scroll-strategy');

// 滚动策略工厂函数
export function matSelectScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy {
  return () => overlay.scrollStrategies.reposition();
}

@NgModule({
  providers: [
    {
      provide: MAT_SELECT_SCROLL_STRATEGY,
      useFactory: matSelectScrollStrategyFactory,
      deps: [Overlay]
    }
  ]
})
export class AppModule {}

⚠️ 注意：该方案仅能临时解决当前错误，后续可能出现其他Material组件的兼容性问题，建议尽快推进自定义包的版本升级。

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