programing

'@angular/common/http' 모듈을 찾을 수 없습니다.

itsource 2023. 8. 15. 20:09
반응형

'@angular/common/http' 모듈을 찾을 수 없습니다.

저는 Angular about Http에 대한 이 기본적인 튜토리얼을 따르고 있습니다.

설정: 모듈 설치 섹션에서 볼 수 있듯이 HttpClientModule은 다음과 같이 가져옵니다.

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

프로젝트에서 이를 시도하면 "Cannot find module '@angular/common/http'"라는 오류가 나타납니다.

저는 다음 모듈을 가져오기 위해 다음과 같이 시도했습니다.

import { HttpModule } from '@angular/http';

다음은 제 수입 섹션입니다.

imports: [
    HttpModule
],

문제는 이 HttpModule을 서비스 개체에 주입할 수 없고 "Cannot find module"(모듈 HttpModule을 찾을 수 없음) 오류가 발생한다는 것입니다.

서비스 클래스는 다음과 같습니다.

import { Injectable, OnInit } from '@angular/core';
//Custom Models
import { Feed } from '../Models/Feed';

@Injectable()
export class FeedsService {
    constructor(private httpClient: HttpModule) {}
}

내가 뭘 잘못하고 있는 거지?

업데이트 튜토리얼에 따라 모듈을 가져올 수 없다는 것을 알았을 때 수행했어야 하는 모든 작업은npm update모든 패키지를 업데이트하는 명령입니다.

중요:HttpClientModule 는 Angular 4.3.0 이상용입니다.자세한 내용은 @Maximus의 의견과 @Pengy답변을 확인하십시오.


Original answer:

.HttpClient모듈이 아닌 구성 요소/서비스에 포함됩니다.를 가져오는 경우HttpClientModule의 신의에@NgModule

// app.module.ts:
 
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
 
// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http';
 
@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})
export class MyAppModule {}

그래서 변화.

constructor(private httpClient: HttpModule) {}

로.

constructor(private httpClient: HttpClient) {}

문서에 기재된 바와 같이


그러나 HttpModule을 가져왔으므로

당신은 주사를 놓을 필요가 있습니다.constructor(private httpClient: Http)@Maximus가 댓글에, @Pengy가 이 답변언급한 것처럼.

그리고 그고차이대자내세은용한한의 자세한 하십시오.HttpModule그리고.HttpClientModule 답변을 확인합니다.

중요 업데이트:

HttpModule그리고.Http@angular/httpAngular V5 이후로 더 이상 사용되지 않습니다. 를 사용해야 합니다.HttpClientModule그리고.HttpClient@angular/common/http대신 CHANGELOG를 참조하십시오.


**@4.3.0 이전 Angular 버전의 경우 주입해야 합니다.Http@angular/http,그리고.HttpModule이는 NgModule의 가져오기 배열에서 가져오기 위한 것입니다.

import {HttpModule} from '@angular/http';

@NgModule({
  ...
  imports: [HttpModule]
})

http 요소 또는 에 있습니다.

import { Http } from '@angular/http';

constructor(private http: Http) {}

(포함) 4.3.0 이후의 Angular 버전의 경우 다음을 사용할 수 있습니다.HttpClient@angular/common/httpHttp@angular/http▁to를 가져오는 것을 잊지 마세요.HttpClientModule당신의 시간에NgModule의 가져오기 배열이 먼저입니다.

@econax의 답변을 참조하십시오.

참고: 이것은 @angular/http용이지, 질문된 @angular/common/http용이 아닙니다!

이러한 방식으로 가져오기만 하면 완벽하게 작동합니다.

// Import HttpModule from @angular/http
import {HttpModule} from '@angular/http';


@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [... ]
})

그런 다음 service.ts를 다음과 같이 구성합니다.

constructor(private http: Http) { }

getmyClass(): Promise<myClass[]> {
  return this.http.get(URL)
             .toPromise()
             .then(response => response.json().data as myClass[])
             .catch(this.handleError);
}

제가 문제가 되었던 angular 5에서 http를 사용하고 있었습니다.Httpclient를 사용하여 문제를 해결했습니다.

자동 가져오기에 주의하십시오. 내 HTTP_INTERCEPTORS는 다음과 같이 자동 가져오기되었습니다.

import { HTTP_INTERCEPTORS } from '@angular/common/http/src/interceptor';

대신에

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

이 오류를 야기한 것은

여기에 있는 답들은 다시 한번 구식입니다.이 문제를 해결하기 위해 저는 다음을 수행해야 했습니다.

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

...
@NgModule({
    imports: [
        HttpClientModule
    ],
    declarations: [],
    providers: [
        HttpClient
    ],

내부의 이 모든 것app.module.ts이것은 각 11에 대한 것입니다.

가져와야 합니다.http부터@angular/http서비스 중:

import {Http} from '@angular/http';

constructor(private http: http) {} // <--Then Inject it here


// now you can use it in any function eg:
getUsers() {
    return this.http.get('whateverURL');
}

Ionic 3과 Angular 5를 사용하는 모든 사용자에 대해 동일한 오류가 팝업되었고 여기에서 해결책을 찾지 못했습니다.하지만 저는 저에게 효과적인 몇 가지 방법을 찾았습니다.

재생산 단계:

  • npm 설치 - g cordova 이온성
  • ionic 시작 myApp 탭
  • cd myApp
  • cd node_http/sys/common(http 모듈이 존재하지 않음).

ionic:(터미널/게이트웨이 프롬프트에서 이온 정보 실행) 버전을 확인하고 최신 버전인지 확인합니다.패키지의 각 버전과 패키지도 확인할 수 있습니다.프로젝트의 json 폴더.

종속성과 패키지를 확인하고 코르도바를 설치했습니다.원자를 다시 시작하면 오류가 사라집니다.이것이 도움이 되길 바랍니다!

다음을 참조하십시오. http: @angular/common/http 대신 @angular/http를 사용합니다.

종속성을 추가하고 이 오류를 수신하는 경우

npm ERR! 코드 ERESOLVE npm ERR! ERESOLVE가 종속성 트리 npm ERR! npm ERR!해결 중: marriumonial-ui@0.0.0 npm ERR!루트 프로젝트 npm ERR! node_modules/@angular/core npm ERR! @angular/core@"^14.2.0"을 찾았습니다. npm ERR!종속성을 확인할 수 없습니다. 루트 프로젝트 npm ERR! neer @angular/http@7.2.16 node_modules/@angular/http npm ERR! @angular/http@"7.2.16"에서 npm ER! 피어 @angular/core@"7.2.16"업스트림 종속성 충돌을 수정하거나 --force 또는 --legacy-peer-depnpm ERR!을 사용하여 npm ERR! 이 명령을 다시 시도하여 잘못된 종속성 확인을 수락합니다.npm ERR! npm ERR! npm ERR!전체 보고서는 다음을 참조하십시오. npm ERR!C:\사용자\DELL\AppData\Local\nnpm-cache_logs\2023-01-05T17_55_53_622Z-eresolve-report.txt

npm ERR!이 실행에 대한 전체 로그는 npm ERR!에서 확인할 수 있습니다.
C:\사용자\DELL\AppData\Local\nnpm-cache_logs\2023-01-05T17_55_53_622Z-debug-0.log

실행을 실행하여 캐시를 강제로 지울 수 있습니다.npm cache clean --force

언급URL : https://stackoverflow.com/questions/45207615/cannot-find-the-angular-common-http-module

반응형