首页 > 解决方案 > 错误 NullInjectorError: R3InjectorError(AppModule)

问题描述

我正在尝试使用服务将我的组件中的值保存到 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 数据库中。请帮忙。

标签: angularfirebase

解决方案


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

“没有 AngularFireDatabase 的提供者”

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

  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

推荐阅读