angular - File 'app/hero.ts' is not a module error in the console, where to store interfaces files in directory structure with angular2?

Question

I am doing the angular2 tutorial at this address: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html I have put the hero interface in a single file under the app folder, in the console I have this error:

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.

If I put my interface file in a hero folder the error disappear, this is not mentioned in the documentation, what's wrong with my import?

My import directive (at the beguining of the component files) in both app.components.ts and hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Must I replace my import directive by: import {Hero} from './'; or simply put the code in a hero folder?

Answer 1

Try Restarting the editor in which you are writing the code(VS code or Sublime). Compile and Run it again. I have done the same and it worked.

This happens when you add a new class outside from your editor or keep running your angular cli 'ng serve'. Actually your editor or the 'ng serve' command may not able to find the newly created files.