firebase 错误空注入器错误:R3喷油器错误(应用模块)

ru9i0ody  于 2023-01-27  发布在  其他
关注(0)|答案(8)|浏览(167)

我尝试使用服务将值从组件保存到Firebase。但是当我使用服务时,我会收到NullInjector错误。我做了所有不属于Internet的事情。导入了所有东西,但它不起作用。我已经尝试导入HttpClientModule,AngularFireDatabase,但没有任何工作。我已经试图完全重新创建该项目的新鲜安装一切。我已经尝试了不同版本的firebase和angular(当前为firebase@7.24.0@angular/fire@6.0.3)。没有任何效果。
这是我的消防服务

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)

在我向brain组件中的构造函数添加参数之前,网站运行良好,但我一添加私家车服务:大脑组件的构造函数中的FireerviceService甚至不会加载HTML。我是Angular 和firebase的新手。我正在尝试将值保存在firebase数据库中。请帮助。

dldeef67

dldeef671#

从错误消息中可以看到,依赖项容器缺少AngularFireDatabase的提供程序:
“没有AngularFireDatabase的提供程序”
如果你使用AngularFireDatabase,你需要在提供者的app.module.ts中导入该服务--你目前正在导入AngularFirestore。

providers: [
    AngularFireDatabase,
    FireserviceService
  ],
l7mqbcuq

l7mqbcuq2#

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

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

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
ibps3vxo

ibps3vxo3#

在服务中检查@Injectable注解是否如下所示:

@Injectable({
  providedIn: 'root'
})
a0zr77ik

a0zr77ik4#

这是因为您正在尝试使用Angular Fire数据库,但在应用程序模块中导入了Angular Firestore模块和Angular Firestore。
在应用程序模块.ts中,将AngularFirestoreModule替换为AngularFireDatabase模块,将AngularFirestore替换为AngularFireDatabase

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

不过,我会建议使用角火恢复,而不是角火数据库,如果你是开始新的。
https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

5t7ly7z5

5t7ly7z55#

This thread may help
如果您使用库并将firebase添加为dependency,则必须使用相同的版本保留这两个位置
意思是如果

主应用程序

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

@我的/库

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

那么你将面临同样的错误。修复这个问题的方法是将@another/lib版本从7.22.0提升到MainApp

  • 请参阅相关问题,了解为什么不应将其导入dependencies,而应导入peerDependencies *
0lvr5msh

0lvr5msh6#

我也有同样的问题。我通过从

import { Database, onValue, ref, set } from "firebase/database";

import { Database, onValue, ref, set } from "@angular/fire/database";

使用中(Angular 13和火灾7.3.0)

pb3s4cty

pb3s4cty7#

这应该对你有用:
在您的app.module.ts > imports:[ ]
替换为:

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

用这个

AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule
7qhs6swi

7qhs6swi8#

你应该检查一下你是否已经导入了HttpClientModule,因为服务通常使用它,而我在你的代码中没有看到它。尝试一下并给予我一些反馈!我也遇到过同样的问题,我通过导入HttpClientModule解决了它
我已经把它导入到app.module里了,像这样

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    HttpClientModule // HERE
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并且您还应该检查是否有@Injectable装饰器,其中providedIn: 'root'位于服务类中,如下所示

@Injectable({
  providedIn: 'root' // HERE
})
export class SocialPostsService {

相关问题