반응형
Angular 4 오류: HttpClient에 대한 공급자 없음
CLI를 사용하여 새로운 각도 프로젝트를 시작하고 있으며 다음을 위한 공급자가 없습니다.HttpClient
오류
추가했습니다.HttpClientModule
이 시나리오의 일반적인 원인으로 보이는 내 모듈 가져오기.온라인에서 그 외에는 많은 것을 찾지 못해서 어떤 문제가 발생할지 잘 모르겠습니다.
나의 앱.sv.ts.
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
그리고 나의 서비스
@Injectable()
export class FlexSearchService {
constructor(private http: HttpClient) {}
getSavedSearchResult(index: string, queryName: string, query: string ): Observable<any> {
const url = `${environment.flexUrl}/${index}/search`;
const item = new SearchQuery({queryName: queryName, variables: {q: query}});
return this.http.post(url, item);
}
}
ng 버전은 다음과 같은 출력을 제공합니다.
@angular/cli: 1.4.2
node: 6.9.4
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
mytsconfig
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
나의 시험
import { TestBed, inject } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FlexSearchService } from './flex-search.service';
describe('FlexSearchService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [FlexSearchService, HttpClientModule]
});
});
it('should be created', inject([FlexSearchService], (service: FlexSearchService) => {
expect(service).toBeTruthy();
}));
어떤 도움이든 대단히 감사합니다!
당신의 테스트에서
TestBed.configureTestingModule({
providers: [FlexSearchService, HttpClientModule]
});
그럴 것 같네요.
TestBed.configureTestingModule({
imports: [HttpClientModule],
providers: [FlexSearchService]
});
또는 더 나은 기능(모의 요청을 원하는 경우):
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [FlexSearchService]
});
HttpClientTestingModule을 가져옵니다.
테스트:
import { HttpClientTestingModule } from '@angular/common/http/testing';
테스트의 configureTestingModule에서 다음을 수행합니다.
TestBed.configureTestingModule({
imports: [ HttpClientTestingModule ],
})
.compileComponents();
더 쉬운 방법은 전 세계적으로 제공하는 것입니다.다음과 같이 app.module.ts로 가져옵니다.
import { HttpModule } from '@angular/http'
import { HttpClient, HttpClientModule } from '@angular/common/http';
수입품에 신고합니다.
imports: [
HttpModule,
HttpClientModule, ...
]
이를 위해 다음을 가져와야 합니다.
import { HttpClientTestingModule } from '@angular/common/http/testing';
그리고 사양 파일의 경우configureTestingModule
테스트의 다음을 수행합니다.
TestBed.configureTestingModule({
imports: [ HttpClientTestingModule ],
})
.compileComponents();
프로젝트 내에서 npm 링크를 사용하여 각진 라이브러리를 로컬로 연결하려고 할 때 이 문제가 발생했습니다.
저장소에서 라이브러리를 다운로드하여 문제를 해결했습니다.
언급URL : https://stackoverflow.com/questions/46569404/angular-4-error-no-provider-for-httpclient
반응형
'programing' 카테고리의 다른 글
도커 - 컨텍스트를 준비할 수 없음: 도커 파일 경로의 심볼 링크를 평가할 수 없음: GetFileAttributes전 (0) | 2023.07.29 |
---|---|
판다 데이터 프레임의 열 순서 설정 (0) | 2023.07.29 |
반응형 레이아웃에 요소를 숨깁니까? (0) | 2023.07.29 |
하위 구성 요소의 메서드 호출 (0) | 2023.07.29 |
Spring과 Spring MVC 프레임워크의 차이점은 무엇입니까? (0) | 2023.07.29 |