运行项目时出现StaticInjectorError(AppModule)[Overlay -> Injector]错误求助

我之前开发Angular项目时也碰到过完全一样的错误！这个问题本质是Angular的依赖注入系统找不到Overlay所需的Injector实例，大概率和Angular CDK的配置或者版本兼容有关，给你几个亲测有效的排查和解决方向：

1. 确认是否正确导入Overlay模块 #

这是最常见的原因——很多人会忘记导入@angular/cdk里的OverlayModule。打开你的app.module.ts，检查是否已经添加了这个模块的导入：

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  declarations: [/* 你的组件/指令 */],
  imports: [
    // ...其他已导入的模块（比如BrowserModule等）
    OverlayModule  // 一定要加上这个！
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 检查Angular与CDK的版本兼容性 #

版本不匹配是这类注入错误的高发因素。打开你的package.json，确保@angular/core和@angular/cdk的主版本号完全一致（比如都是14.2.x、15.1.x）。如果版本不一致，可以用Angular CLI的升级命令统一更新：

ng update @angular/core @angular/cdk

3. 排查自定义Overlay相关代码的注入方式 #

如果你自己封装了依赖Overlay的服务或组件，要确保是通过Angular的依赖注入系统获取实例，而不是手动实例化。比如正确的注入方式是：

import { Overlay } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private overlay: Overlay) { } // 正确：让DI系统自动提供实例
}

不要用const overlay = new Overlay(...)这种手动创建的方式，这样DI系统无法传递所需的Injector实例。

4. 清理项目缓存后重启 #

有时候项目缓存会导致奇怪的依赖注入异常，可以尝试清理缓存后重新启动项目：

# 清理Angular CLI缓存
ng cache clean
# 带清缓存参数启动项目
npm start -- --clearCache

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