NullInjectorError: AngularFirestore에 대한 공급자가 없습니다.
오류를 해결하는 데 도움이 필요한 Angular를 배우고 있습니다.저는 이 링크를 따라가고 있습니다: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md 은 각진2와 각진 파이어스토어2가 있는 각진 작은 앱을 만듭니다.
그러나 serve를 누를 때 브라우저 콘솔에서 아래 오류가 발생합니다.
StaticInjectorError[AngularFirestore]:
StaticInjectorError[AngularFirestore]:
NullInjectorError: No provider for AngularFirestore!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
저는 구글 검색을 해봤지만 저에게 맞는 정확한 해결책을 찾지 못했습니다. :(,
제가 팔로우한 내용은 다음과 같습니다: 1) 설치된 노드 버전 8.9.12) npm install -g @angular/cli --> 버전 1.5.23) ng new 'project-name' 4) npm install anglefire2 firebase --save
다음은 내 app.module.ts 파일입니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.component.ts:
import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(db: AngularFirestore) {}
}
environt.ts:
export const environment = {
production: false,
firebase: {
apiKey: 'xxxxx',
authDomain: 'aaaaaaa',
databaseURL: 'bbbbbbbbbbbbbbbbbb',
projectId: 'aaaaaaaaaaaaaa',
storageBucket: 'aaaaaaaaaaaa',
messagingSenderId: 'aaaaaaaaaaaaa'
}
};
ng serve, 그리고 나는 위의 오류를 받고 있습니다...
추가해야 합니다.
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
declarations: [ AppComponent ],
providers: [AngularFirestore],
bootstrap: [ AppComponent ]
})
export class AppModule {}
저도 같은 문제가 있었고 아래는 해결되었습니다.
이전 서비스 코드:
@Injectable()
업데이트된 작업 서비스 코드:
@Injectable({
providedIn: 'root'
})
열기:./src/app/app.module.ts
상단에 있는 Firebase 모듈을 가져옵니다.
에서 {environment} 가져오기.../환경/환경';
'angularfire2'에서 {AngularFireModule}을(를) 가져옵니다.
'angularfire2/firestore'에서 {AngularFirestoreModule}을(를) 가져옵니다.
그리고 매우 중요합니다.
NgModule에서 '가져오기'를 업데이트해야 합니다.
@NgModule({
declarations: [
AppComponent,
OtherComponent // Add other components here
...
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase, 'your-APP-name-here'),
AngularFirestoreModule
],
...
})
한 번 해보세요, 이제 효과가 있을 겁니다.
자세한 내용은 Angularfire2 설명서를 참조하십시오.
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
행운을 빕니다.
간단한 답.
마주칠 때마다NullInjector error
이유는 항상import/providers
이라missing
.
솔루션:
에 모듈을 추가하십시오.
imports
내부 배열module.ts
파일.에서 사용할 서비스를 추가합니다.
providers
내부 배열modules.ts
파일.
@NgModule({})
export class SomeModule{
`imports:[]`,
`providers: []`
}
추가 중AngularFirestoreModule.enablePersistence()
가져오기 섹션에서 문제를 해결했습니다.
imports: [
BrowserModule, AngularFireModule,
AngularFireModule.initializeApp(config),
AngularFirestoreModule.enablePersistence()
]
저에게 이상한 것은 제가 가지고 있었다는 것입니다.provider:[]
그러나 공급자를 사용하는 HTML 태그가 오류의 원인이었습니다.나는 아래의 빨간 상자를 언급하고 있습니다.
알고 보니 저는 같은 "employee-list.component.ts" 파일 이름을 가진 서로 다른 구성 요소에 두 개의 클래스가 있어서 프로젝트가 잘 컴파일되었지만 참조는 모두 엉망이었습니다.
이 문제를 해결하려면 다음 위치에서 방화벽 저장소를 제거해야 합니다.
import { AngularFirestore } from '@angular/fire/firestore/firestore';
component.ts 파일에서 다음과 같이 사용할 수 있습니다.
import { AngularFirestore } from '@angular/fire/firestore';
이것은 또한 당신의 문제가 될 수 있습니다.
AngularFire2 최신 버전의 경우
AngularFire2 설치
$ npm install --save firebase @angular/fire
그런 다음 app.module.ts 파일을 업데이트합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireDatabaseModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
여기에서 FireStore CRUD 작동 튜토리얼을 확인하십시오.
가져오기 변경 위치:
import { AngularFirestore } from '@angular/fire/firestore/firestore';
수신인:
import { AngularFirestore } from '@angular/fire/firestore';
이것으로 제 문제가 해결됩니다.
저는 그것을 제 앱 모듈로 가져갑니다.수입 후에는 작업해야 합니다.
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: FirestoreSettingsToken, useValue: {} }
],
내 버전:
Angular CLI: 7.2.4
Node: 10.15.0
Angular: 7.2.5
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.4
@angular-devkit/build-angular 0.12.4
@angular-devkit/build-optimizer 0.12.4
@angular-devkit/build-webpack 0.12.4
@angular-devkit/core 7.2.4
@angular-devkit/schematics 7.2.4
@angular/animations 8.0.0-beta.4+7.sha-3c7ce82
@angular/cdk 7.3.2-3ae6eb2
@angular/cli 7.2.4
@angular/fire 5.1.1
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.3.2-3ae6eb2
@ngtools/webpack 7.2.4
@schematics/angular 7.2.4
@schematics/update 0.12.4
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
import angularFirebaseStore
에서 서비스와 같은 공급자로 설정합니다.
Ionic App에 Firebase를 추가하는 동안 동일한 문제가 발생했습니다.문제를 해결하기 위해 다음 단계를 수행했습니다.
npm install @angular/fire firebase --save
내 app/app.module.ts에서:
...
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/firestore';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule
],
providers: [
{ provide: SETTINGS, useValue: {} }
],
bootstrap: [AppComponent]
})
이전에는 Firestore 설정을 사용했습니다.설정 대신 토큰입니다.하지만 그 버그는 해결되었고, 이제 우리는 Settings를 사용합니다.(링크)
내 앱/서비스/myService.ts에서 다음과 같이 가져왔습니다.
import { AngularFirestore } from "@angular/fire/firestore";
어떤 이유에서인지 vscode는 "@angular/fire/firestore/firestore"로 이를 수입하고 있었습니다."@angular/fire/firestore"로 변경한 후 문제가 해결되었습니다!
언급URL : https://stackoverflow.com/questions/47380239/nullinjectorerror-no-provider-for-angularfirestore
'programing' 카테고리의 다른 글
가로 방향 파생으로 인해 쿼리 속도가 느려집니다. (0) | 2023.06.06 |
---|---|
설명서에 명시된 대로 새 프로젝트를 생성하는 동안 웹 API 키가 Firebase에서 생성되지 않습니다. (0) | 2023.06.06 |
루비에서 SHA1 해시를 만들려면 어떻게 해야 합니까? (0) | 2023.06.01 |
Android에서 현재 시간 및 날짜를 가져오는 방법 (0) | 2023.06.01 |
왜 gitrevert는 m 옵션 누락에 대해 불평합니까? (0) | 2023.06.01 |