错误 NullInjectorError: R3InjectorError(AppModule)答案

【问题标题】：ERROR NullInjectorError: R3InjectorError(AppModule)错误 NullInjectorError: R3InjectorError(AppModule)
【发布时间】：2021-05-20 22:55:06
【问题描述】：

我正在尝试使用服务将我的组件中的值保存到 firebase。但是当我使用服务时，我会收到 NullInjector 错误。我做了所有不是互联网的事情。什么都导入了，但是不行。我已经尝试过导入 HttpClientModule、AngularFireDatabase 但没有任何效果。我试图通过全新安装所有内容来完全重新创建项目。我尝试了不同版本的 firebase 和 angular（目前为 firebase@7.24.0 @angular/fire@6.0.3）。没有任何效果。

这是我的 fireservice.service

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class FireserviceService {

  constructor(private db: AngularFireDatabase) {
    
   }
   create(){
    return this.db.list('/shopping-carts').push({
      dateCreated:new Date().getTime()
    });
  }
}

这是我的应用模块

import { FireserviceService } from './fireservice.service';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { BrainComponent } from './brain/brain.component';


@NgModule({
  declarations: [
    AppComponent,
    BrainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    AngularFirestore,
    FireserviceService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(){

  }
}

这是我的组件

import { FireserviceService } from './../fireservice.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'brain',
  templateUrl: './brain.component.html',
  styleUrls: ['./brain.component.css']
})
export class BrainComponent  {

  constructor(private cartService: FireserviceService) { }
  addToCart(val:any){
    console.log(val)
  }

}

这是我得到的错误

core.js:6142 ERROR NullInjectorError: R3InjectorError(AppModule)[FireserviceService -> AngularFireDatabase -> AngularFireDatabase -> AngularFireDatabase]: 
  NullInjectorError: No provider for AngularFireDatabase!
    at NullInjector.get (http://localhost:51081/vendor.js:38768:27)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at injectInjectorOnly (http://localhost:51081/vendor.js:32465:33)
    at Module.ɵɵinject (http://localhost:51081/vendor.js:32469:61)
    at Object.FireserviceService_Factory [as factory] (http://localhost:51081/main.js:280:159)
    at R3Injector.hydrate (http://localhost:51081/vendor.js:39103:35)
    at R3Injector.get (http://localhost:51081/vendor.js:38924:33)
    at NgModuleRef$1.get (http://localhost:51081/vendor.js:53004:33)

在我将参数添加到大脑组件中的构造函数之前，该站点工作正常。但是，只要我在大脑组件的构造函数中添加私家车服务：FireserviceService，它甚至都不会加载 HTML。我是角度和火力的新手。我正在尝试将值保存在 firebase 数据库中。请帮忙。

【问题讨论】：

标签： angular firebase

【解决方案1】：

这是因为您尝试使用 Angular Fire 数据库，但在应用模块中导入了 Angular Firestore 模块和 Angular Firestore。

在 app.module.ts 中将 AngularFirestoreModule 替换为 AngularFireDatabaseModule 并将 AngularFirestore 替换为 AngularFireDatabase

  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

但是，如果您是新手，我建议您使用 Angular Firestore 而不是 Angular Fire 数据库。

https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

【讨论】：

非常感谢。在我按照您的指示操作后，它给了我一个错误，说“错误：./src/app/app.module.factory.js 19:2850-2872”在'@中找不到导出'RealtimeDatabaseURL'（导入为'i8'） angular/fire'”。我浏览了一下互联网，发现我必须将 angular 和 angular fire 的版本更改为兼容的版本。我将 angular 更改为 9，将 angular fire 更改为 5.4.2。它现在正在工作。
我尝试将类似的代码复制到我的主项目中，但现在它不再工作了。它给了我同样的错误。

【解决方案2】：

您可以从错误消息中看到依赖容器缺少 AngularFireDatabase 的提供程序：

“没有 AngularFireDatabase 的提供者”

如果您使用 AngularFireDatabase，则需要在提供程序的 app.module.ts 中导入该服务 - 您当前正在导入 AngularFirestore。

  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

【讨论】：

答案表明它需要提供AngularFireDatabase，而不是AngularFirestore，这确实是进口的。所以确实很有帮助。

【解决方案3】：

将 HttpClientModule 导入 app.module.ts 并将 HttpClientModule 添加到 imports 数组中。

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

【讨论】：

【解决方案4】：

在你的服务中查看@Injectable注解是否如下图：

@Injectable({
  providedIn: 'root'
})

【讨论】：

如果您不希望根模块提供服务？

【解决方案5】：

这应该适合你：

在你的app.module.ts > imports:[ ]

替换这个：

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore())

有了这个：

AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule

【讨论】：

【解决方案6】：

This thread may help,

如果您使用库并将firebase 添加为dependency，则必须使两个位置保持相同的版本

如果

主应用程序

"dependencies": { 
  "@my/lib": "1.0.0",
  "firebase": "7.22.0" 
}

@my/lib

"dependencies": { 
  "firebase": "7.24.0"  // <-- The version is higher
}

那么你将面临同样的错误。解决此问题的方法是将@another/lib 版本从MainApp 升级为7.22.0 到7.24.0。

查看链接问题，了解为什么不应将其导入 dependencies 而是导入 peerDependencies

【讨论】：