Angular Firebase登录报NavbarComponent NullInjectorError错误

报错NullInjectorError: No provider for NavbarComponent由以下配置错误导致：

• 错误将AngularFire相关的NgModule类写入AppModule的providers数组，NgModule仅允许在imports数组中注册，写入providers会破坏Angular依赖注入树的解析逻辑，导致依赖查找链路异常
• 存在无效导入，且代码中有位置试图将NavbarComponent作为服务类注入到其他组件/服务的构造函数中。组件不属于可注入服务，未在DI容器中注册为provider就会触发该类报错
• 冗余的服务重复注册也会干扰DI容器的正常解析

按顺序修改代码即可解决：

1. 清理AppModule的providers数组：
   • 删除所有AngularFire相关的模块项（AngularFirestoreModule、AngularFireModule、AngularFireAuthModule、AngularFireDatabaseModule）
   • 删除重复注册的AuthGuard、AuthService，这两个服务已经通过@Injectable({providedIn: 'root'})自动注册到根注入器，无需重复声明
     修改后providers配置如下：

   providers: [],
   bootstrap: [AppComponent]
   

2. 清理navbar.component.ts的无效导入，删除import { RouterModule } from '@angular/router';行。RouterModule是模块级导入项，组件类中无需导入，路由指令的支持由所属模块导入RouterModule提供，组件仅在需要调用路由跳转方法时导入Router即可。
   修改后的navbar.component.ts代码：

   import { Component, OnInit } from '@angular/core';
   import { AuthService } from '../../../services/auth.service';
   
   @Component({
     selector: 'app-navbar',
     templateUrl: './navbar.component.html',
     styleUrls: ['./navbar.component.css']
   })
   export class NavbarComponent implements OnInit {
     constructor(public auth: AuthService) { }
     ngOnInit(): void {}
   }
   

3. 全局搜索所有构造函数定义，检查是否存在constructor(private navbar: NavbarComponent) {}类的写法，存在则直接删除。组件实例不能通过依赖注入获取，使用NavbarComponent时直接在对应模板中写入<app-navbar></app-navbar>标签即可。跨组件通信逻辑通过共享服务实现，禁止注入组件实例。
4. 可选优化：当前代码同时混用了AngularFire compat兼容层API和新版Firebase模块化API，建议统一使用一套避免后续版本兼容问题：
   • 继续使用compat写法：删除provideFirebaseApp、provideFirestore、provideAuth三个模块化provider的导入和注册
   • 升级到新版模块化API：移除所有@angular/fire/compat相关的导入和模块注册

修改完成后终止当前dev服务，重新执行ng serve启动，清空浏览器缓存后重新登录跳转，报错即会消失。

报错原始日志：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NavbarComponent -> NavbarComponent -> NavbarComponent]: 
  NullInjectorError: No provider for NavbarComponent!
get@http://localhost:4200/vendor.js:120414:27

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