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

Question

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.

I got the same error in the same tutorial because I had forgot the export keyword for the interface.

probably you forgot to add "Export" in the class definition.

-->

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

Also, try with

export {Hero} 

at the bottom of your hero.ts class, and finally, check capital letter file name and class name.

The error is because you have not saved the files after creating them.

Try saving all the file by clicking "Save All" on the Editor.

You can see the number of files which are not saved by looking below the "File" menu shown using blue color.

Restarting my ng serve process worked for me