source

'app/hero.ts' 파일은 콘솔의 모듈 오류가 아닙니다. angular2의 디렉토리 구조에서 인터페이스 파일을 저장할 위치는 어디입니까?

itover 2023. 4. 27. 22:12
반응형

'app/hero.ts' 파일은 콘솔의 모듈 오류가 아닙니다. angular2의 디렉토리 구조에서 인터페이스 파일을 저장할 위치는 어디입니까?

나는 하고 있습니다.angular2다음 주소에서 튜토리얼: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html 나는 그것을 넣었습니다.hero인터페이스를 단일 파일 아래에 설치합니다.app콘솔에서 다음 오류가 발생했습니다.

app/app.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.
[0] app/hero-detail.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.

내 인터페이스 파일을 영웅 폴더에 넣으면 오류가 사라지는데, 문서에는 이 오류가 언급되지 않았습니다. 가져오기에 무슨 문제가 있습니까?

(구성요소 파일의 시작 부분에서) 두 가지 모두에 대한 내 가져오기 지침app.components.ts그리고.hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

수입 지침을 다음으로 대체해야 합니까?import {Hero} from './'; 아니면 단순히 영웅 폴더에 코드를 넣을까요?

코드(VS 코드 또는 Sublime)를 작성하는 편집기를 다시 시작해 보십시오.컴파일하고 다시 실행합니다.저도 똑같이 했고 효과가 있었습니다.

편집기에서 새 클래스를 외부에 추가하거나 각도 조절 '서버'를 계속 실행할 때 발생합니다.실제로 편집기나 'ng serve' 명령어는 새로 생성된 파일을 찾지 못할 수 있습니다.

인터페이스에 대한 내보내기 키워드를 잊어버려서 동일한 튜토리얼에서 동일한 오류가 발생했습니다.

이 오류는 파일을 만든 후 저장하지 않았기 때문입니다.

편집기에서 "모두 저장"을 클릭하여 모든 파일을 저장해 보십시오.

저장되지 않은 파일의 수는 파란색으로 표시된 "파일" 메뉴 아래를 보면 알 수 있습니다.

클래스 정의에 "내보내기"를 추가하는 것을 잊어버렸을 수 있습니다.

export class Hero {
     id: number;
     name: string;
   }

또한 사용해 보십시오.

export {Hero} 

hero.ts 클래스의 맨 아래에서 마지막으로 대문자 파일 이름과 클래스 이름을 확인합니다.

내 컴퓨터 다시 시작ng serve나를 위해 작동된 프로세스

스택블리츠에서 동일한 오류를 발생시키는 사용자의 경우

IDE의 왼쪽 사이드바에 종속성 탭이 있습니다. 옆에 있는 새로 고침 버튼을 클릭하기만 하면 바로 이동할 수 있습니다.


여기에 이미지 설명 입력

이 오류는 의 실패로 인해 발생합니다.ng serve새로 추가된 파일을 자동으로 선택합니다.이 문제를 해결하려면 서버를 다시 시작하십시오.

다시 여는 텍스트 편집기 또는 IDE를 닫으면 이 문제가 해결되지만, 많은 사람들은 프로젝트를 다시 여는 것에 대한 모든 스트레스를 겪고 싶어하지 않습니다.텍스트 편집기를 닫지 않고 이 문제를 해결하려면...

서버가 실행 중인 터미널에서

  • 를 누릅니다.ctrl+C하려면 서버를 중지합니다.
  • 다시 합니다.ng serve

그러면 되겠군요.

제가 프로젝트에 새로운 파일을 추가할 때마다 경험했듯이, 저는 ng 서버를 중지하고 다시 시작해야 했습니다.

클래스 또는 인터페이스도 내보내는 것을 잊지 마십시오.

export interface Sort {
    value: string;
    viewValue: string;
}

요소와 가져오기는 " 튜리얼서는요인스이터파동페디에합렉배록리니다도하치토"입니다. 따라서 상대적으로 가져오기'./hero'다른 곳으로 옮기려면 변경해야 합니다.

편집: 코드는 여전히 작동할 수 있지만 잘못된 위치에서 가져오기를 시도하고 있기 때문에 컴파일러가 불만을 제기할 입니다.저는 단순히 당신의 구조에 따라 수입을 변경하고 싶습니다.예:

app/
  component1/
    component1.ts
  compnent2/
    component2.ts
  hero.ts

나는 간단히 수입을 변경할 것입니다.import {Hero} from '../hero'.

저도 같은 문제에 직면했습니다.

서버를 다시 시작했는데 정상적으로 작동합니다.벌레 같아요.

저는 같은 문제에 직면하여 서버를 다시 시작하고 편집기를 다시 시작하려고 했지만 컴퓨터를 다시 시작하는 것이 마법이었습니다.

추신: 윈도우 기계에서 문제가 발생했는데 모듈을 새 폴더로 이동할 때 문제가 발생했습니다.

ng 서비스 다시 시작

저도 같은 문제가 있었습니다.오류를 검색하기 위해 오류를 선택하고 실수로 CTRL+C(복사를 의미)를 실행하여 ngserver를 종료했습니다.ng server를 다시 시작할 때 오류가 사라졌습니다 :).가끔 오타와 뚱뚱한 손가락이 도움이 됩니다 ;-)

편집자 문제.Angular CLI를 사용하지 않는 새 파일을 생성할 때는 File > Save All(VS Code)로 이동하여 Editor에 새 변경 사항을 알리십시오.그런 다음 "ng serve --open"을 다시 실행합니다.내 문제를 해결했어요.도움이 되길 바랍니다.

제 경우에는 '*service.ts'가 모듈이 아니라고 비난했습니다.

이를 해결하기 위해 모듈에 있는 공급자 내에 서비스를 추가했습니다.

VSC에서도 같은 문제가 발생했습니다.편집기를 다시 시작하고 응용 프로그램을 다시 시작했습니다.잘 작동했습니다.

좋은 컴파일을 얻기 전에 Visual Studio Code뿐만 아니라 노드 서버 프로세스도 다시 시작해야 한다는 것을 알게 되었습니다.

저도 비슷한 문제가 있었습니다.나는 Hero 대신 Hero라고 썼습니다.

다음을 가져옵니다.

import { Hero } from '../Hero';

때때로 이 오류는 .ts 파일이 저장되지 않을 때 발생합니다.따라서 프로젝트의 모든 파일이 저장되었는지 확인하거나 편집기를 다시 시작해 보십시오.

프롬프트를 폴더로 를 들어, " 명프프트앱이폴동다합니로더열고를"D:\angular-tour-of-heroes\src\app

그런 다음 다음 명령을 사용하여 새 파일을 만듭니다.

ng generate class hero

그러면 다음이 생성됩니다.hero.ts파일. 그러면 내보내기 코드를 붙여넣으면 오류가 사라집니다.

모든 파일을 저장해야 합니다.예: html, css, component.ts, 모듈, 모델 파일.각 파일을 열고 ctrl-S를 누릅니다.이것은 나에게 효과가 있었습니다.

저의 경우, 'app/hero.ts' 파일에 대한 변경 사항을 저장하는 것을 잊어버렸고, serve를 저장하고 다시 시작한 후 문제가 해결되었습니다.

나의 결심,

저의 경우, 모델 파일을 작성하여 공백으로 유지하였습니다.

그래서 다른 모델로 가져오면 오류가 발생하므로 모델 유형 스크립트 파일을 만들 때 정의를 작성합니다.

바꾸다

import{observable} from 'rxjs/observable'; 

로.

import{observable} from 'rxjs';

저장했는지 확인합니다.컴파일 전 TS 파일입니다.

클래스를 내보내기 전에 추가합니다.

@Injectable({
  providedIn: 'root'
})  

내 문제는 내가 달리고 있다는 것이었습니다.ng build --prodenvironment.prod.ts

제 경우에는 터미널에서 my.ts 파일을 만들었습니다.자동으로 인코딩이 UTF-16으로 설정되었습니다.Angular 컴파일러는 UTF-16 파일과 함께 작동할 수 없습니다(Windows에서만 테스트됨).

인코딩을 UTF-8로 변경한 후 모든 것이 다시 정상적으로 작동했습니다.

foo.component.ts 파일을 저장하면 모든 것이 정상적으로 작동합니다.대부분의 답변은 편집기를 닫으라는 것입니다.편집기를 닫으면 저장되지 않은 모든 변경 내용이 자동으로 저장되므로 다음 번에 편집기에 프로젝트를 로드할 때 작업이 시작됩니다. :-)

IDE 메뉴에서 "모두 저장"을 수행해야 합니다.나는 이것을 놓쳤고 무슨 일이 일어나고 있는지 알아내려고 너무 많은 시간을 보냈습니다.

인터페이스 앞에 내보내기를 놓으십시오.

export interface myModel {
  firstName: string,
  lastName: string
}

언급URL : https://stackoverflow.com/questions/34629517/file-app-hero-ts-is-not-a-module-error-in-the-console-where-to-store-interfac

반응형