'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.

인터페이스 파일을 hero 폴더에 넣으면 오류가 사라집니다. 이것은 설명서에 언급되어 있지 않습니다. 내 가져 오기에 어떤 문제가 있습니까?

모두 (구성 요소 파일의 beguining에서) 내 import 지시문 app.components.ts과 hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

가져 오기 지시문을 다음으로 대체해야합니까, import {Hero} from './'; 아니면 단순히 코드를 hero 폴더에 넣어야 합니까?

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

에디터 외부에서 새로운 클래스를 추가하거나 앵귤러 클리 'ng serve'를 계속 실행하면 이런 일이 발생합니다. 실제로 편집기 또는 'ng serve'명령이 새로 작성된 파일을 찾지 못할 수 있습니다.

인터페이스 의 내보내기 키워드를 잊어 버렸기 때문에 동일한 자습서에서 동일한 오류가 발생했습니다 .

아마도 클래스 정의에 "내보내기"를 추가하는 것을 잊었을 것입니다.

->

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

또한 사용해보십시오

export {Hero} 

hero.ts 클래스의 맨 아래에 마지막으로 대문자 파일 이름과 클래스 이름을 확인하십시오.

파일을 작성한 후 저장하지 않았기 때문에 오류가 발생합니다.

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

파란색으로 표시된 "파일"메뉴를 보면 저장되지 않은 파일 수를 확인할 수 있습니다.

ng serve프로세스를 다시 시작 하면 나를 위해 일했습니다.

stackblitz 에서 동일한 오류가 발생하는 사람들을 위해

당신은 발견 할 것이다 종속성 IDE의 왼쪽 사이드 바에서 탭을 선택합니다. 옆에있는 새로 고침 버튼을 클릭하기 만하면됩니다.

프로젝트에 새 파일을 추가 할 때마다 경험했듯이 ng 서버를 중지했다가 다시 시작해야합니다.

이 자습서에서는 모든 구성 요소와 인터페이스 파일을 동일한 디렉토리에 배치하므로 './hero'이를 변경해야하는 다른 위치로 이동 하려면 상대 가져 오기 를 수행해야합니다.

편집 : 코드가 여전히 작동 할 수 있지만 잘못된 위치에서 가져 오기를 시도하고 있기 때문에 컴파일러가 불평합니다. 단순히 구조에 따라 가져 오기를 변경하고 싶습니다. 예를 들면 다음과 같습니다.

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

간단히 수입을로 변경합니다 import {Hero} from '../hero'.

이 오류는 ng serve서브 서버가 새로 추가 된 파일을 자동으로 가져 오기 때문에 발생 합니다. 이 문제를 해결하려면 서버를 다시 시작하면됩니다.

텍스트 편집기 나 IDE를 다시 열면이 문제가 해결되지만 많은 사람들이 프로젝트를 다시 열어야하는 모든 스트레스를 겪고 싶지는 않습니다. 텍스트 편집기를 닫지 않고이 문제를 해결하려면 ...

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

• 를 눌러 ctrl+C서버를 중지 한 다음
• 서버를 다시 시작하십시오. ng serve

작동합니다.

나는 같은 문제에 직면했다.

서버를 다시 시작했는데 제대로 작동합니다. 버그 인 것 같습니다.

서브를 다시 시작

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

에디터 문제. Angular CLI를 사용하지 않는 새 파일을 작성할 때 파일> 모두 저장 (VS 코드)으로 이동하여 편집기가 새 변경 사항을 인식하도록하십시오. 그런 다음 "ng serve --open"을 다시 실행하십시오. 내 문제를 해결했다. 그것이 도움이되기를 바랍니다.

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

Visual Studio Code를 다시 시작해야 할뿐만 아니라 노드 서버 프로세스도 다시 컴파일해야 좋은 컴파일을 얻을 수 있음을 알았습니다.

나는 같은 문제에 직면하여 서버를 다시 시작하고 편집기를 다시 열었지만 컴퓨터를 다시 시작하면 마술이되었습니다.

추신 : Windows 컴퓨터에서 문제가 발생하여 모듈을 새 폴더로 옮길 때 문제가 발생했습니다.

나는 비슷한 문제가 있었다. 나는 영웅 대신에 영웅을 썼다

다음을 가져옵니다.

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'파일의 변경 사항을 저장하는 것을 잊어 버렸습니다. 서비스를 저장하고 다시 시작한 후에 문제가 해결되었습니다.

내 결의안,

제 경우에는 모델 파일을 만들어 비워 두었습니다.

다른 모델로 가져 오면 오류가 발생합니다. 따라서 모델 유형 스크립트 파일을 작성할 때 정의를 작성하십시오.

변화

import{observable} from 'rxjs/observable'; 

에

import{observable} from 'rxjs';

컴파일하기 전에 .TS 파일을 저장했는지 확인하십시오.

수업을 보내기 전에 이것을 추가하십시오

@Injectable({
  providedIn: 'root'
})