Angular 19集成Firestore时_NgZone无提供者引发NullInjectorError求助

错误原因分析 #

报错NullInjectorError: No provider for _NgZone!由两个核心问题引发：

1. Firebase重复初始化：app.config.ts已通过provideFirebaseApp完成Firebase初始化，但app.component.ts中又手动调用initializeApp(environment)，导致实例冲突，破坏Angular依赖注入链。
2. Firestore实例重复提供：AppComponent的providers数组中手动添加了Firestore，而app.config.ts已通过provideFirestore提供全局单例实例，重复提供导致依赖注入无法正确解析_NgZone。

修复步骤 #

1. 清理AppComponent中的重复配置 #

修改app.component.ts：

• 移除组件元数据里的providers: [Firestore]
• 删除顶部的initializeApp(environment)调用
• 移除未使用的兼容版Firestore导入（若不需要）

修改后的关键代码片段：

// 移除未使用的兼容版导入（如果不需要）
// import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';

// 删除重复初始化代码
// initializeApp(environment);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  // 移除手动添加的Firestore providers
  // providers: [Firestore],
  imports: [NgFor, FormsModule, MatFormFieldModule, MatSelectModule, MatAutocompleteModule,
    MatInputModule, HttpClientModule
  ]
})
export class AppComponent implements OnInit {
  // 其余代码保持不变
}

2. 修正app.config.ts的Firebase配置 #

将硬编码的Firebase配置替换为environment变量，确保全局配置唯一：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    // 使用environment初始化Firebase
    provideFirebaseApp(() => initializeApp(environment)),
    provideFirestore(() => getFirestore())
  ]
};

3. 确认app.module.ts配置 #

项目采用独立组件模式，app.module.ts无需声明AppComponent，保持现有空配置即可。

验证修复 #

执行以下命令重启项目：

ng serve

此时_NgZone依赖注入会恢复正常，Firestore可正确初始化，报错将消失。

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